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

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

{% block content %}
  <div class="kt-subheader kt-grid__item"></div>

  <form action="{{ path('mobile_abhanumber_mode') }}" 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>
              <button type="reset" class="btn btn-secondary btn-bold mr-2">Reset</button>
              <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' %}
          <style>
                        
            .account-card {
              transition: all 0.3s ease;
            }

            .account-card:hover {
              background-color: #f8f9fa;
            }

            .account-details {
              line-height: 1.4;
            }

            .kt-radio {
              margin-top: 3px;
            }

            .img-fluid {
              max-width: 100px;
              height: auto;
            }
          </style>
          <div class="form-group row">
            <label class="col-2 col-form-label font-weight-bold required">Authentication Mode</label>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
            <input type="hidden" name="txnId" value="{{ txnId }}" />
            <input type="hidden" name="authMode" value="{{ authMode }}" />

            <input type="hidden" name="token" value="{{ token }}" />
            <input type="hidden" name="message" value="{{ message }}" />
            <div class="col-md-10">
              <div class="kt-radio-inline">
                {% for account in accounts %}
                <dl class="row">
                  <dt class="col-1">
                    <label class="kt-radio">
                      <input type="radio" required="required" class="kt-radio" name="fetch_mode" value="{{ account.ABHANumber }}" />
                      <span></span>
                    </label>
                  </dt>
                  <dt class="col-3">

                    <img src="{{ account.profilePhoto }}" alt="ABHA Card" class="img-fluid">
                    </dt>
                    
                    <dd class="col-8">
                  
                    <label class="non-req required">{{ account.name }}</label><br>
                    <label class="non-req required">{{ account.preferredAbhaAddress }}</label><br>
                    <label class="non-req required">{{ account.ABHANumber }}</label><br>
                  </dd>
                
                </dl>
                
                {% endfor %}
              </div>
            </div>
            <span class="is_exists" style="position: absolute;padding-top: 40px;padding-left: 239px;"></span>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}