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

{% block title %}{{auth_type}}{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('known_mode_otp') }}" method="post" id="frmOTP" class="kt-form">
    <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">{{auth_type}}</h3>
                </div>

                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
                        <button type="submit" class="btn btn-primary btn-bold">Next</button>
                    </div>
                </div>
            </div>

            <div class="kt-portlet__body">
                {% include 'parts/flash.html.twig' %}
                <div class="form-group row">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <input type="hidden" name="type" value="{{ type }}">
                    <input type="hidden" name="txn_id" value="{{ txn_id }}">
                    <input type="hidden" name="auth_method" value="{{ auth_method }}">
                    <input type="hidden" name="abha_details" value="{{ abha_detail }}">
                    <label class="col-md-2 col-form-label font-weight-bold">OTP</label>
                    <div class="col-lg-6 col-xl-4">
                        <input type="text" minlength="6" maxlength="6" value="" name="otp" id="otp" class="form-control">
                    </div>
                    <div class="error"></div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    $(document).ready(function () {
        $('#frmOTP').validate({ // initialize the plugin
            rules: {
                otp: {
                    required: true,
                    digits: true,
                    minlength: 6,
                    maxlength: 6,
                },
            },
            messages: {
                otp: {
                    required: "Please enter otp."
                }
            }
        });
    });
</script>
{% endblock %}