{% extends 'main2.html' %}
{% load static %}
{% block content %}

<div class="px-4 py-5 px-md-5 text-lg-start">
    <div class="row gx-lg-5 align-items-center">
        <div class="col-md-10 mx-auto col-lg-12">

            <div class="col-md-10 mx-auto col-lg-12">
                {% if uc == "" %}
                <form class="p-4 p-md-5 border rounded-5 bg-white" action="" method="post">
                    {% csrf_token %}
                    {% if rl == "" %}
                    <div id="roll_number" class="inputs d-flex flex-row justify-content-center mt-5">
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="first" name="first"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="second" name="second"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="third" name="third"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="fourth" name="fourth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="fifth" name="fifth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="sixth" name="sixth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="seventh" name="seventh"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="eighth" name="eighth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required />
                    </div>
                    {% else %}
                    <div id="roll_number" class="inputs d-flex flex-row justify-content-center mt-5">
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="first" name="first"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.0}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="second" name="second"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.1}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="third" name="third"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.2}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="fourth" name="fourth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.3}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="fifth" name="fifth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.4}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="sixth" name="sixth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.5}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="seventh" name="seventh"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.6}}" />
                        <input class="m-2 p-4 text-center form-control rounded" type="text" id="eighth" name="eighth"
                            maxlength="1" style="font-size: 3em;" autocomplete="off" required value="{{rl.7}}" />
                    </div>
                    {% endif %}
                    <div class="container">
                        <div class="row justify-content-md-center">
                            <label
                                style="font-weight: 700 !important; font-size: 0.8vw; color: #4f4f4f !important;">ROLL
                                NUMBER (eg. B23CS001)</label>
                        </div>
                    </div>
                    <button class="w-100 btn btn-primary waves-effect mt-5" type="submit"><i
                            class="fas fa-sign-in-alt pr-2" aria-hidden="true"></i> Generate Token</button>
                </form>
                {% else %}
                <form class="p-4 p-md-5 border rounded-5 bg-white" action="" method="post">
                    <div class="col-md-10 mx-auto col-lg-12">
                        <div id="otp_roll_number" class="inputs d-flex flex-row justify-content-center mt-5">
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="first1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.0}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="second"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.1}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="third1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.2}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="fourth1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.3}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="fifth1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.4}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="sixth1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.5}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="seventh1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.6}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="eighth1"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{rl.7}}" />
                        </div>
                        <div class="container">
                            <div class="row justify-content-md-center">
                                <label
                                    style="font-weight: 700 !important; font-size: 0.8vw; color: #4f4f4f !important;">ROLL
                                    NUMBER</label>
                            </div>
                        </div>
                        <div id="otp" class="inputs d-flex flex-row justify-content-center mt-5">
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="first2"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{uc.0}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="second2"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{uc.1}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="third2"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{uc.2}}" />
                            <input class="m-2 p-4 text-center form-control rounded" type="text" id="fourth2"
                                maxlength="1" style="font-size: 3em;" disabled="disabled" value="{{uc.3}}" />
                        </div>
                        <div class="container">
                            <div class="row justify-content-md-center">
                                <label
                                    style="font-weight: 700 !important; font-size: 0.8vw; color: #4f4f4f !important;">TOKEN
                                    NUMBER</label>
                            </div>
                        </div>
                        <div class="container mt-5">
                            <div class="row justify-content-md-center">
                                <a href="{% url 'generate_token' %}"
                                    class="btn btn-outline-primary btn-sm waves-effect rounded-1"><i
                                        class="fas fa-redo pr-2" aria-hidden="true"></i> Reset</a>
                            </div>
                        </div>
                    </div>
                </form>
                {% endif %}
            </div>

        </div>
    </div>
</div>

{% endblock %}