---
layout: 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="row">
    <div class="col-md-7 mx-auto">
      <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"
                style="background:{{site.data[folder][lang][file].color}} ;"
                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>
    </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>