---
layout: appscms-feature
---

{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
= page.folderName %} {% assign calculatorData=
site.data[folder][lang][file].calculatorData %}

<div class="container">
  <div class="calculator-workspace">
    <div class="row w-100 mx-auto">
      <form id="calculator-form" class="w-100">
        {%- for item in calculatorData.calculatorRow -%}
        <div class="row" id="calculator-row-{{forloop.index}}">
          {%- if item.labelName -%}
          <div class="col-md-12">
            <div class="d-flex">
              <label for="{{item.labelId}}">{{item.labelName}}</label>
              {%- if item.toolTip -%}
              <span
                class="calculator-tooltip"
                data-toggle="tooltip"
                data-placement="top"
                title="{{item.toolTip}}"
                ><i class="fas fa-info-circle"></i></span
              >{%- endif -%}
            </div>
          </div>
          {%- endif -%} {%- if item.dropDown or item.inputBox or
          item.dateTimePicker -%}
          <div class="col-md-12">
            <div class="d-flex calculator-inputs">
              {%- if item.inputBox -%} {%- assign inputBoxType = "number" -%}
              {%- if item.inputType -%} {%- assign inputBoxType = item.inputType
              -%} {%- endif -%}
              <input
                class="form-control"
                type="{{inputBoxType}}"
                name="{{item.inputName}}"
                id="{{item.inputId}}"
              />
              {%- endif -%} {%- if item.dropDown -%}
              <select
                class="form-control"
                name="{{item.dropDownName}}"
                id="{{item.dropDownId}}"
              ></select>
              {%- endif -%} {%- if item.dateTimePicker -%}
              <input
                class="form-control"
                type="date"
                name="{{item.dateTimePicker}}"
                id="{{item.dateTimePickerId}}"
              />
              {%- endif -%} {%- if item.unit -%}
              <div class="unit">{{item.unit}}</div>
              {%- endif -%}
            </div>
          </div>
          {%- endif -%}
        </div>
        {%- endfor -%}
        <div id="dynamic-section"></div>
      </form>
    </div>
    <div class="row w-100 mx-auto">
      {%- if calculatorData.ButtonValue -%}
      <div class="col-12 mt-4 px-0">
        <div class="d-flex justify-content-end">
          <button
            class="submit-button"
            type="{{calculatorData.ButtonType}}"
            id="{{calculatorData.ButtonId}}"
          >
            {{calculatorData.ButtonValue}}
          </button>
        </div>
      </div>
      {%- endif -%} {%- if calculatorData.resultDiv -%}
      <div class="col-12 mt-3">
        <div class="result-section" id="result-section"></div>
      </div>
      {%- endif -%}
    </div>
  </div>
  {%- if calculatorData.calculatorWarning-%}
  <div class="warning-alert-box mt-4">
    <div class="alert alert-danger" role="alert">
      {{ calculatorData.calculatorWarning }}
    </div>
  </div>
  {%- endif -%}
</div>