{% extends 'layout.html' %}

{% block content %}
    <form action="{% url 'home' %}" method="post">
        {% csrf_token %}
        {% if form.pin.errors %}
        <div class="row mb-3 justify-content-center" id="error_wrapper">
            <div class="col-sm-12 col-md-6 text-danger">
                <ul class="list-unstyled">
                {% for error in form.pin.errors %}
                    <li><span class="oi" data-glyph="warning"></span> {{ error }}</li>
                {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
        <div class="row mb-3 justify-content-center">
            <div class="col-sm-12 col-md-6">
                {{ form.pin }}
            </div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="1" class="btn btn-lg btn-light border keypad-button"><span class="display-5">1</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="2" class="btn btn-lg btn-light border keypad-button"><span class="display-5">2</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="3" class="btn btn-lg btn-light border keypad-button"><span class="display-5">3</span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="4" class="btn btn-lg btn-light border keypad-button"><span class="display-5">4</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="5" class="btn btn-lg btn-light border keypad-button"><span class="display-5">5</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="6" class="btn btn-lg btn-light border keypad-button"><span class="display-5">6</span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="7" class="btn btn-lg btn-light border keypad-button"><span class="display-5">7</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="8" class="btn btn-lg btn-light border keypad-button"><span class="display-5">8</span></button></div>
            <div  class="col-4 d-grid gap-2 mx-auto"><button data-value="9" class="btn btn-lg btn-light border keypad-button"><span class="display-5">9</span></button></div>
        </div>
        <div class="row mb-5">
            <div  class="col-6 d-grid gap-2 mx-auto"><button data-value="0" class="btn btn-lg btn-light border keypad-button"><span class="display-5">0</span></button></div>
            <div  class="col-6 d-grid gap-2 mx-auto"><button data-value="x" class="btn btn-lg btn-light border keypad-button pt-3"><span class="oi display-5" data-glyph="delete"></span></button></div>
        </div>
        <div class="row mb-3">
            <div  class="col-sm-12 col-md-6 d-grid gap-2 mx-auto"><input type="submit" class="btn btn-lg btn-success pt-3 pb-3 btn-dark" value="LOGIN"></div>
        </div>
    </form>
{% endblock %}