form.hbs

<div class="container">
    <div class="steps">
        <ul>
          <li class="list active number one">
            <span class="icon-header">{{{fixed_costs}}}</span>
            <ul>
                <li class="icon field1"><span>{{{depreciation}}}</span></li>
                <li class="icon field2"><span>{{{insurance}}}</span></li>
                <li class="icon field3"><span>{{{credit}}}</span></li>
                <li class="icon field4"><span>{{{inspection}}}</span></li>
                <li class="icon field5"><span>{{{road_taxes}}}</span></li>
            </ul>
          </li>
          <li class="list number two">
            <span class="icon-header">{{{running_costs}}}</span>
            <ul>
                <li class="icon field6"><span>{{{fuel}}}</span></li>
                <li class="icon field7"><span>{{{maintenance}}}</span></li>
                <li class="icon field8"><span>{{{rep_improv}}}</span></li>
                <li class="icon field9"><span>{{{parking}}}</span></li>
                <li class="icon field10"><span>{{{tolls}}}</span></li>
                <li class="icon field11"><span>{{{fines}}}</span></li>
                <li class="icon field12"><span>{{{washing}}}</span></li>
            </ul>
          </li>
          <li class="list number three">
            <span class="icon-header">{{{extra_data1}}}</span>
            <ul>
                <li class="icon field13"><span>{{{extra_data_public_transp}}}</span></li>
                <li class="icon field14"><span>{{{extra_data_income}}}</span></li>
                <li class="icon field15"><span>{{{extra_data_working_time}}}</span></li>
                <li class="icon field16"><span>{{{distance}}}</span></li>
                <li class="icon field17"><span>{{{extra_data_time_spent_in_driving}}}</span></li>
            </ul>
          </li>
        </ul>
    </div>


    <!--  Start form -->
    <div class="form_part">

        <!--************************************************************************-->
        <!--************************************************************************-->
        <!--            Start Form Part 1  -   Standing Costs                       -->
        <!--************************************************************************-->

        <!-- see issue #124 https://github.com/jfoclpf/autocosts/issues/124
        <div class="form_part_head_title">
            <h2 class="lang-fixed_costs_header_1">
               1. {{{fixed_costs}}}
            </h2>
            <p class="lang-fixed_costs_header_2">
                {{{fixed_costs_header_2}}}
             </p>
        </div>
        -->


        <!--************************** DEPRECIATION **************************-->
        <div class="field_container field1">
            <div id="depreciation_input">
                <label>
                    {{{aq_date}}}
                </label>
                <input type="number" data-placeholder="MM" required step="1"
                       id="acquisitionMonth" name="acquisitionMonth" class="input_40 input_month input_integer"
                       min="1" max="12">

                <input type="number" data-placeholder="AAAA" required step="1"
                       id="acquisitionYear" name="acquisitionYear" class="input_80 input_year input_integer"
                       min="1910" max="3000">
            </div>

            <div id="commercial_value">
                <label>
                    {{{com_value}}}
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="commercialValueAtAcquisition"
                           id="commercialValueAtAcquisition" class="currencyInput unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                </div>

            </div>

            <div>
                <label>
                    {{{com_value_today}}}
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="commercialValueAtNow"
                           id="commercialValueAtNow" class="currencyInput unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** INSURANCE **************************-->
        <div class="field_container field2">
            <div>
                <label>
                    {{{insurance}}}
                </label>
                <div class="radio_tabs">
                    <div class="radio_tab_container">
                        <input type="radio" name="insurancePaymentPeriod" value="month">
                        <label>
                            {{{monthly}}}
                        </label>
                     </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="insurancePaymentPeriod" value="trimester">
                        <label>
                            {{{trimesterly}}}
                        </label>
                    </div>
                    <div class="radio_tab_container">
                        <input type="radio" name="insurancePaymentPeriod" value="semester">
                        <label>
                            {{{semesterly}}}
                        </label>
                    </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="insurancePaymentPeriod" value="year">
                        <label>
                            {{{yearly}}}
                        </label>
                    </div>
                </div>

                <div class="input_value">
                    <input type="number" min="0" step="Any"
                           id="insuranceValue" class="currencyInput unit_left" name="insuranceValue">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** CREDIT **************************-->
        <div class="field_container field3">
            <div>
                <label class="float_left">
                    {{{credit}}}
                </label>
                <div class="radio_tabs small_tabs">
                    <div class="radio_tab_container">
                        <input type="radio" name="AutoCreditRadioBtn" value="true" id="cred_auto_true">
                        <label>
                            {{{yes}}}
                        </label>
                     </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="AutoCreditRadioBtn" value="false" id="cred_auto_false">
                        <label>
                            {{{no}}}
                        </label>
                    </div>
                </div>

                <div id="sim_credDiv">
                    <label>
                        {{{credit_loan}}}
                    </label>
                    <div class="input_value small_input">
                         <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="borrowedAmount"
                                id="borrowedAmount" class="currencyInput unit_left">
                        <span class="unit">
                            {{{curr_symbol}}}
                        </span>
                    </div>

                    <label>
                        {{{credit_period}}}
                    </label>
                    <div class="input_value small_input">
                         <input type="number" min="1" step="1" name="numberInstallments"
                                id="numberInstallments" class="no_padding_left input_200 input_integer">
                    </div>

                    <label>
                        {{{credit_average_value}}}
                    </label>
                    <div class="input_value small_input">
                         <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="amountInstallment"
                                id="amountInstallment" class="currencyInput unit_left">
                        <span class="unit">
                            {{{curr_symbol}}}
                        </span>
                    </div>

                    <label>
                        {{{credit_residual_value}}}
                    </label>
                    <div class="input_value small_input ">
                        <input type="number" min="0" step="Any" name="residualValue"
                               id="residualValue" class="currencyInput unit_left">
                        <span class="unit">
                            {{{curr_symbol}}}
                        </span>
                    </div>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** INSPECTION **************************-->
        <div class="field_container field4">
            <div>
                <label>
                    {{{inspection}}}
                </label>

                <div>
                    <div class="input_value small_input">
                        <label>
                            {{{inspection_nbmr_times}}}
                        </label>
                        <input type="number" min="0" step="1" name="numberInspections"
                               id="numberInspections" class="no_padding_left input_70 input_integer">
                    </div>

                    <label>
                        {{{inspection_price}}}
                    </label>
                    <div class="input_value small_input">
                         <input type="number" min="0" step="Any" name="averageInspectionCost"
                                id="averageInspectionCost" class="currencyInput unit_left">
                         <span class="unit">
                            {{{curr_symbol}}}
                         </span>
                    </div>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** ROAD TAX **************************-->
        <div class="field_container field5">
            <div id="p2">
                <label>
                    {{{road_taxes}}}
                    <span>
                        {{{road_taxes_value}}}
                    </span>
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="roadTaxes"
                           id="roadTaxes" class="currencyInput unit_n_year_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{year}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>

        <!--  end form Step 1  -->


        <!--************************************************************************-->
        <!--************************************************************************-->
        <!--               Start Form Part 2 - Running Costs                        -->
        <!--************************************************************************-->

        <!-- see issue #124 https://github.com/jfoclpf/autocosts/issues/124
        <div class="form_part_head_title">
            <h2 class="lang-fixed_costs_header_1">
                2. {{{running_costs}}}
            </h2>
            <p class="lang-fixed_costs_header_2">
                {{{running_costs_header_2}}}
             </p>
        </div>
        -->

        <!--************************** FUEL **************************-->
        <div class="field_container field6">
            <div id="depr_input_td">
                <label>
                    {{{fuel_desc}}}
                </label>
                <div class="input_value small_input no_margin_bottom">
                    <label>
                        {{{fuel_calc}}}
                    </label>
                    <div class="radio_tabs small_tabs">
                        <div class="radio_tab_container">
                            <input type="radio" name="radio_fuel_euros" id="radio_fuel_euros" value="money">
                            <label>
                                {{{curr_name_plural}}}
                            </label>
                         </div>

                        <div class="radio_tab_container">
                            <input type="radio" name="radio_fuel_euros" id="radio_fuel_km" value="distance">
                            <label>
                                {{{distance}}}
                            </label>
                        </div>
                    </div>
                </div>

                <!-- // Option selected = MONEY [], DISTANCE [X] //
                Here start >>> CONSIDERING YOU DRIVE TO WORK? YES/NO-->
                <div id="distance_div_form2" class="input_value small_input no_margin_bottom">
                    <label>
                        {{{fuel_job_calc}}}
                    </label>
                    <div class="radio_tabs small_tabs">
                        <div class="radio_tab_container">
                            <input type="radio" name="car_job_form2" class="no_left_margin"
                                   id="car_job_form2_yes" value="true">
                            <label>
                                {{{yes}}}
                            </label>
                         </div>

                        <div class="radio_tab_container">
                            <input type="radio" name="car_job_form2" class="no_left_margin"
                                   id="car_job_form2_no" value="false">
                            <label>
                                {{{no}}}
                            </label>
                        </div>
                    </div>
                </div>


                <!-- YES & NO options -->

                <!-- // Option selected = YES - USER DRIVES TO WORK // -->
                <div id="div_car_job_yes_form2">
                    <div class="input_value small_input">
                        <label>
                            {{{fuel_days}}}
                        </label>
                        <input type="number" min="1" max="7" step="1" class="no_padding_left input_integer"
                               id="car_to_work_number_days_week" name="car_to_work_number_days_week">
                         <span class="unit_days-per-week">
                            {{{days_per_week_short}}}
                        </span>
                    </div>

                    <div class="input_value small_input">
                        <label>
                            {{{fuel_dist_home_job}}}
                        </label>
                        <input type="number" min="0" data-valueGreaterThanMin="true"
                               step="Any" name="car_to_work_distance_home_work"
                               id="car_to_work_distance_home_work" class="no_padding_left">
                        <span class="unit_kms">
                            {{{std_dist}}}
                        </span>
                    </div>

                    <div class="input_value small_input">
                        <label>
                            {{{fuel_dist_no_job}}}
                        </label>
                        <input type="number" min="0" step="Any" name="car_to_work_distance_weekend"
                               id="car_to_work_distance_weekend" class="no_padding_left">
                        <span class="unit_kms">
                            {{{std_dist}}}
                        </span>
                    </div>
                </div>

                <!-- // Option selected = NO - USER DOES NOT DRIVE TO WORK // -->
                <div id="div_car_job_no_form2">
                    <div class="input_value small_input">
                        <label>
                            {{{you_drive}}}
                        </label>
                        <input type="number" min="0" data-valueGreaterThanMin="true"
                               step="Any" name="no_car_to_work_distance"
                               id="no_car_to_work_distance" class="no_padding_left">
                        <select class="distance_standard" id="distance_standard_onfuel"></select>
                        <span class="per">
                            {{{word_per}}}
                        </span>
                        <select class="time_period" id="no_car_to_work_time_period"></select>
                    </div>
                </div>

                <div class="fuel_efficiency">
                    <div class="input_value small_input">
                        <label>
                            {{{fuel_car_eff}}}
                        </label>
                        <!-- fuel efficiency either in L/100km or mpg cannot be zero -->
                        <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" class="no_padding_left"
                               id="fuel_efficiency" name="fuel_efficiency">
                        <select class="fuel_efficiency_standard" id="fuel_efficiency_standard_onfuel"></select>
                    </div>
                    <label>
                        {{{fuel_price}}}
                    </label>
                    <div class="input_value small_input">
                        <!-- fuel price -->
                        <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="fuel_price"
                               id="fuel_price" class="currencyInput small_input_unit_per_litre unit_gallon_left">
                        <span class="unit">
                            {{{curr_symbol}}}/{{{std_volume_short}}}
                        </span>
                    </div>
                </div>


                <!-- // Option selected = MONEY [X], DISTANCE [] // -->
                <div id="currency_div_form2" class="input_value">
                    <input type="number" min="0" step="Any" name="fuel_currency_value"
                           id="fuel_currency_value" class="currencyInput input_200 unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                    <span class="per">
                        {{{word_per}}}
                    </span>
                    <select class="time_period" id="fuel_currency_time_period"></select>
                </div>

            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** MAINTENANCE **************************-->
        <div class="field_container field7">
            <div>
                <label>
                    {{{maintenance}}}
                    <span>
                        {{{maintenance_desc}}}
                    </span>
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="maintenance"
                           id="maintenance" class="currencyInput unit_n_year_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{year}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** REPAIRS AND IMPROVEMENTS **************************-->
        <div class="field_container field8">
            <div>
                <label>
                    {{{rep_improv}}}
                    <span>
                        {{{rep_improv_desc}}}
                    </span>
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="repairsImprovements"
                           id="repairs" class="currencyInput unit_n_year_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{year}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** PARKING **************************-->
        <div class="field_container field9">
            <div>
                <label>
                    {{{parking}}}
                    <span>
                        {{{parking_desc}}}
                    </span>
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" name="parking"
                           id="parking" class="currencyInput unit_n_month_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{month}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** TOLLS **************************-->
        <div class="field_container field10">
            <div>
                <label>
                    {{{tolls}}}
                    <span>
                        {{{tolls_desc}}}
                    </span>
                </label>

                <div class="input_value small_input no_margin_bottom">
                    <label>
                        {{{tolls_day_calc}}}
                    </label>
                    <div class="radio_tabs small_tabs">
                        <div class="radio_tab_container">
                             <input type="radio" name="tolls_daily_radioBtn" id="tolls_daily_true" value="true">
                            <label>
                                {{{yes}}}
                            </label>
                         </div>

                        <div class="radio_tab_container">
                            <input type="radio" name="tolls_daily_radioBtn" value="false" id="tolls_daily_false">
                            <label>
                                {{{no}}}
                            </label>
                        </div>
                    </div>
                </div>

                <!-- /////// Option selected = No /////// -->
                <div id="daily_tolls_false_div" class="input_value">
                    <label>
                        <span class="no_daily_tolls_description">
                            {{{tolls_day_calc_desc}}}
                        </span>
                    </label>
                    <div class="input_value">
                        <input type="number" min="0" step="Any" name="no_daily_tolls_value"
                               id="no_daily_tolls_value" class="currencyInput input_200 unit_left">
                        <span class="unit">
                            {{{curr_symbol}}}
                        </span>
                        <span class="per">
                            {{{word_per}}}
                        </span>
                        <select class="time_period big-dropdown" id="tolls_period_select"></select>
                    </div>
                </div>

                <!-- /////// Option selected = YES /////// -->
                <div id="daily_tolls_true_div" class="input_value">
                    <input type="number" min="0" step="Any" name="daily_expense_tolls"
                           id="daily_expense_tolls" class="currencyInput input_200 unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                    <span class="during">
                        {{{during}}}
                    </span>
                    <input type="number" min="1" max="31" step="1" class="input_integer"
                           id="number_days_tolls" name="number_days_tolls">
                    <span class="days_per_month">
                        {{{days}}}
                        {{{word_per}}}
                        {{{month}}}
                    </span>

                </div>

            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** FINES / TICKETS **************************-->
        <div class="field_container field11">
            <div>
                <label>
                    {{{fines}}}
                    <span>
                        {{{fines_desc}}}
                    </span>
                </label>

                <div class="input_value">
                    <input type="number" min="0" step="Any" name="tickets_value"
                           id="tickets_value" class="currencyInput input_200 unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                    <span class="per">
                        {{{word_per}}}
                    </span>
                    <select class="time_period big-dropdown" id="tickets_period_select"></select>

                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** WASHING **************************-->
        <div class="field_container field12">
            <div>
                <label>
                    {{{washing}}}
                    <span>
                        {{{washing_desc}}}
                    </span>
                </label>

                <div class="input_value">
                    <input type="number" min="0" step="Any" name="washing_value"
                           id="washing_value" class="currencyInput input_200 unit_left">
                    <span class="unit">
                        {{{curr_symbol}}}
                    </span>
                    <span class="per">
                        {{{word_per}}}
                    </span>
                    <select class="time_period big-dropdown" id="washing_period_select"></select>

                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>
        <!--  end form Step 2  -->


        <!--************************************************************************-->
        <!--************************************************************************-->
        <!--            Start Form Part 3 - Additional Data                         -->
        <!--************************************************************************-->

        <!-- see issue #124 https://github.com/jfoclpf/autocosts/issues/124
        <div class="form_part_head_title">
            <h2 class="lang-fixed_costs_header_1">
                3. {{{extra_data_public_transp}}} &amp; {{{financial_effort}}}
            </h2>
        </div>
        -->

        <!--************************** PUBLIC TRANSPORTS **************************-->
        <div class="field_container field13">
            <div >
                <label>
                    {{{extra_data_public_transp}}}
                </label>

                <div>
                    <div class="input_value small_input">
                        <label>
                            {{{extra_data_family_nbr}}}
                        </label>
                        <input type="number" min="0" max="10" step="1" name="household_number_people"
                               id="household_number_people" class="no_padding_left input_70 input_integer">
                    </div>

                    <label>
                        {{{extra_data_price_pass}}}
                    </label>
                    <div class="input_value small_input">
                        <input type="number" min="0" step="Any" name="public_transportation_month_expense"
                               id="public_transportation_month_expense" class="currencyInput unit_left">
                         <span class="unit">
                            {{{curr_symbol}}}
                        </span>
                    </div>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** INCOME **************************-->
        <div class="field_container field14">
            <div id="fin_effort_Div_form3">
                <label>
                    {{{extra_data_income_question}}}
                </label>
                <div class="radio_tabs" id="income_div_form3">
                    <div class="radio_tab_container">
                        <input type="radio" name="radio_income" value="year" id="radio_income_year">
                        <label>
                            {{{year}}}
                        </label>
                     </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="radio_income" value="month" id="radio_income_month">
                        <label>
                            {{{month}}}
                        </label>
                    </div>
                    <div class="radio_tab_container">
                        <input type="radio" name="radio_income" value="week" id="radio_income_week">
                        <label>
                            {{{week}}}
                        </label>
                    </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="radio_income" value="hour" id="radio_income_hour">
                        <label>
                            {{{hour}}}
                        </label>
                    </div>
                </div>

                <!-- Year -->
                <div id="income_per_year_form3" class="div_element input_value">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="income_per_year"
                           id="income_per_year" class="currencyInput unit_n_year_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{year}}}
                    </span>
                </div>

                <!-- Month -->
                <div id="income_per_month_form3" class="input_value div_element hidden">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="income_per_month"
                           id="income_per_month" class="currencyInput unit_n_month_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{month}}}
                    </span>
                    <br><br>
                    <input type="number" min="1" max="14" step="1" name="income_months_per_year"
                           id="income_months_per_year" class="input_40 input_integer">
                    <span class="months_year">
                        {{{months}}}/{{{year}}}
                    </span>
                </div>

                <!-- Week -->
                <div id="income_per_week_form3" class="input_value div_element hidden">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="income_per_week"
                           id="income_per_week" class="currencyInput unit_n_month_left input_300">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{week}}}
                    </span>
                    <br><br>
                    <input type="number" min="1" max="52" step="Any" name="income_weeks_per_year"
                           id="income_weeks_per_year" class="input_40">
                    <span class="months_year">
                        {{{weeks}}}/{{{year}}}
                    </span>
                </div>

                <!-- Hour -->
                <div id="income_per_hour_form3" class="input_value div_element hidden">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" name="income_per_hour"
                           id="income_per_hour" class="currencyInput unit_n_hour_left input_90">
                    <span class="unit">
                        {{{curr_symbol}}}/{{{hour}}}
                    </span>
                    <br><br>
                    <input type="number" min="0" data-valueGreaterThanMin="true" max="168" step="Any" name="income_hours_per_week"
                           id="income_hours_per_week" class="input_80">
                    <span class="hours_week">
                        {{{hours}}}/{{{week}}}
                    </span>
                    <br><br>
                    <input type="number" min="1" max="52" step="Any" name="income_hour_weeks_per_year"
                           id="income_hour_weeks_per_year" class="input_80">
                    <span class="hours_week">
                        {{{weeks}}}/{{{year}}}
                    </span>
                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** WORKING TIME **************************-->
        <div class="field_container field15">
            <div id="working_time_form3">
                <label class="float_left">
                    {{{extra_data_working_time_question}}}
                </label>
                <div class="radio_tabs small_tabs">
                    <div class="radio_tab_container">
                        <input type="radio" name="radio_work_time" id="working_time_yes_form3" value="true">
                        <label>
                            {{{yes}}}
                        </label>
                     </div>

                    <div class="radio_tab_container">
                        <input type="radio" name="radio_work_time" id="working_time_no_form3" value="false">
                        <label>
                            {{{no}}}
                        </label>
                    </div>
                </div>

                <!-- /////// Option selected = YES /////// -->
                <div id="working_time_input_form3" class="input_value">
                    <input type="number" min="1" max="12" step="1" name="time_month_per_year"
                           id="time_month_per_year" class="input_70 input_integer">
                    <span class="months_year">
                        {{{months}}}/{{{year}}}
                    </span>
                    <input type="number" min="1" max="168" step="Any" name="time_hours_per_week"
                           id="time_hours_per_week" class="input_70">
                    <span class="hours_week">
                        {{{hours}}}/{{{week}}}
                    </span>
                </div>

            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** DISTANCE **************************-->
        <div class="field_container field16">
            <div id="distance_form3">
                <label>
                    {{{distance}}}
                </label>

                <!-- Here start >>> CONSIDERING YOU DRIVE TO WORK? YES/NO -->
                <div class="input_value small_input no_margin_bottom">
                    <label>
                        {{{fuel_job_calc}}}
                    </label>
                    <div class="radio_tabs small_tabs">
                        <div class="radio_tab_container">
                            <input type="radio" name="drive_to_work" class="no_left_margin"
                                   id="drive_to_work_yes_form3" value="true">
                            <label>
                                {{{yes}}}
                            </label>
                         </div>

                        <div class="radio_tab_container">
                            <input type="radio" name="drive_to_work" class="no_left_margin"
                                   id="drive_to_work_no_form3" value="false">
                            <label>
                                {{{no}}}
                            </label>
                        </div>
                    </div>
                </div>


                <!-- YES & NO options -->

                <!-- /////// Option selected = YES /////// -->
                <div id="car_to_job_distance_form3">
                    <div class="input_value small_input">
                        <label>
                            {{{fuel_days}}}
                        </label>
                        <input type="number" min="1" max="7" step="1" class="no_padding_left input_integer"
                               id="drive_to_work_days_per_week" name="drive_to_work_days_per_week">
                         <span class="unit_days-per-week">
                            {{{days_per_week_short}}}
                        </span>
                    </div>

                    <div class="input_value small_input">
                        <label>
                            {{{fuel_dist_home_job}}}
                        </label>
                        <input type="number" min="0" data-valueGreaterThanMin="true" step="Any" class="no_padding_left small_input_kms"
                               id="dist_home_job" name="dist_home_job">
                        <span class="unit_kms">
                            {{{std_dist}}}
                        </span>
                    </div>

                    <div class="input_value small_input">
                        <label>
                            {{{fuel_dist_no_job}}}
                        </label>
                        <input type="number" min="0" step="Any" name="journey_weekend"
                               id="journey_weekend" class="no_padding_left small_input_kms">
                        <span class="unit_kms">
                            {{{std_dist}}}
                        </span>
                    </div>
                </div>

                <!-- /////// Option selected = NO /////// -->
                <div id="car_no_job_distance_form3">
                    <div class="input_value small_input">
                        <label>
                            {{{fuel_dist}}}
                        </label>
                        <input type="number" min="0" step="Any"
                               id="dist_per_month" class="no_padding_left" name="km_per_month">
                        <select class="distance_standard" id="distance_standard_ondistance"></select>
                        <span class="per">
                            {{{word_per}}}
                        </span>
                        <select class="time_period" id="period_km"></select>
                    </div>
                </div>

            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>


        <!--************************** TIME SPENT IN DRIVING **************************-->
        <div class="field_container field17">
            <div id="time_spent_part1_form3">
                <label>
                    {{{extra_data_time_question1}}}
                </label>
                <div class="input_value">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any"
                           class="input_90" id="time_home_job" name="time_home_job">
                    <span class="min">
                        {{{min}}}
                    </span>

                </div>

                <label>
                    {{{extra_data_time_question2}}}
                </label>
                <div class="input_value">
                    <input type="number" min="0" step="Any" class="input_90" id="time_weekend" name="time_weekend">
                    <span class="min">
                        {{{min}}}
                    </span>

                </div>

            </div>

            <div id="time_spent_part2_form3">
                <label>
                    {{{extra_data_time_question3}}}
                </label>
                <div class="input_value">
                    <input type="number" min="0" data-valueGreaterThanMin="true" step="Any"
                           id="min_drive_per_day" class="input_70" name="min_drive_per_day">
                    <span class="minutes_day">
                        {{{minutes}}} {{{word_per}}} {{{day}}}, {{{during}}}
                    </span>
                    <input type="number" min="1" max="31" step="1" class="input_integer input_40"
                           id="days_drive_per_month" name="days_drive_per_month">
                    <span class="days_per_month">
                        {{{days}}} {{{word_per}}} {{{month}}}
                    </span>

                </div>
            </div>

            <div class="next">
                <span class="button btn-orange">{{{next}}} &#10230;</span>
                <span>{{{press_enter_or_tab}}}</span>
            </div>
        </div>

        <div class="bottom_spacer"></div>

    </div><!--  end all forms  -->

    <div class="calculate_bottom_bar">
        <input type="button" id="calculate_costs_btn" class="button big btn-blue cursor_pointer" value="{{{calculate_car_costs}}}">
        <input type="button" id="calculate_costs_btn_g_captcha" class="button big btn-blue cursor_pointer" value="{{{calculate_car_costs}}}">
    </div>

</div><!--  end Container  -->