{% extends 'base.html.twig' %}

{% block title %}ABHA Authentication Modes{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('post_fetch_modes') }}" method="post" class="kt-form" id="frmFetchMode" autocomplete="off">
    <div class="kt-container kt-grid__item kt-grid__item--fluid">
        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">ABHA Authentication Modes</h3>
                </div>

                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <a href="{{ path('abha_link') }}" class="btn btn-clean btn-icon-sm mr-2"><i
                                class="la la-long-arrow-left"></i>Back</a>
                        <a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
                        <button type="submit" class="btn btn-primary btn-bold" id="submitBtn">Next</button>
                    </div>
                </div>
            </div>

            <div class="kt-portlet__body">
                {% include 'parts/flash.html.twig' %}
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold">Authentication Mode</label>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <input type="hidden" name="type" value="{{ type }}">
                    <input type="hidden" name="abha_details" value="{{ abha_details }}">
                    <div class="col-md-10">
                        <div class="kt-radio-inline">
                            <!-- {{dump(modesArr)}} -->
                            {% for modes in modesArr %}
                                {% if (modes == 'AADHAAR_OTP') %}
                                    <label class="kt-radio">
                                        <input type="radio" id="{{ modes }}" required="required" class="kt-radio"
                                            name="fetch_mode" value="{{ modes }}">
                                        <label class="non-req required" for="{{ modes }}">Aadhaar OTP</label>
                                        <span></span>
                                    </label>
                                {% elseif (modes == 'MOBILE_OTP') %}
                                    <label class="kt-radio">
                                        <input type="radio" id="{{ modes }}" required="required" class="kt-radio"
                                            name="fetch_mode" value="{{ modes }}">
                                        <label class="non-req required" for="{{ modes }}">Mobile OTP</label>
                                        <span></span>
                                    </label>
                                    
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <span class="is_exists" style="position: absolute;padding-top: 40px;padding-left: 239px;"></span>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}