@model EmiConfig
<div class="emi" data-emi
     data-min="@Model.MinAmount" data-max="@Model.MaxAmount" data-step="@Model.StepAmount"
     data-amount="@Model.DefaultAmount" data-rate="@Model.Rate.ToString(System.Globalization.CultureInfo.InvariantCulture)"
     data-months="@Model.Months" data-max-months="@Model.MaxMonths">
    <h2 class="emi__title">@Model.Title</h2>

    <div class="emi__result" aria-live="polite">
        <div class="emi__donut">
            <svg viewBox="0 0 36 36" role="img" aria-label="Share of principal and interest in total repayment">
                <circle class="emi__track" cx="18" cy="18" r="15.9155" />
                <circle class="emi__arc" cx="18" cy="18" r="15.9155" stroke-dasharray="70 30" />
            </svg>
        </div>
        <div>
            <p class="emi__label">Monthly EMI</p>
            <p class="emi__value" data-out="emi">&#8377;0</p>
        </div>
    </div>

    <div class="range">
        <label class="range__label">
            <span>Loan amount</span>
            <output data-out="amount"></output>
        </label>
        <input type="range" data-in="amount" min="@Model.MinAmount" max="@Model.MaxAmount" step="@Model.StepAmount" value="@Model.DefaultAmount" />
    </div>

    <div class="range">
        <label class="range__label">
            <span>Interest rate (illustrative, per year)</span>
            <output data-out="rate"></output>
        </label>
        <input type="range" data-in="rate" min="6" max="36" step="0.1" value="@Model.Rate.ToString(System.Globalization.CultureInfo.InvariantCulture)" />
    </div>

    <div class="range">
        <label class="range__label">
            <span>Tenure</span>
            <output data-out="months"></output>
        </label>
        <input type="range" data-in="months" min="6" max="@Model.MaxMonths" step="6" value="@Model.Months" />
    </div>

    <dl class="emi__split">
        <div><dt><span class="dot dot--principal"></span>Principal</dt><dd data-out="principal"></dd></div>
        <div><dt><span class="dot dot--interest"></span>Total interest</dt><dd data-out="interest"></dd></div>
        <div class="emi__total"><dt>Total repayment</dt><dd data-out="total"></dd></div>
    </dl>

    <a class="btn btn--primary btn--block" asp-controller="Apply" asp-action="Index" asp-route-product="@Model.ProductSlug">Apply for this loan</a>
    <p class="emi__note">Estimates only. Your lender sets the final rate, fees and tenure.</p>
</div>