---
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="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">
                        <label for="{{item.labelId}}">{{item.labelName}}</label>
                    </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-color:{{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>
    {%- if calculatorData.calculatorWarning-%}
    <div class="warning-alert-box mt-4">
        <div class="alert alert-danger" role="alert">
            {{ calculatorData.calculatorWarning }}
        </div>
    </div>
    {%- endif -%}

</div>