---
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">
                    {%- 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 -%}
                            <input class="form-control" type="text" 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 -%}
                        </div>

                    </div>
                    {%- endif -%}


                </div>
                {%- endfor -%}
            </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>
</div>