{% extends 'core/base.html' %}

{% block head_title %}Banking System{% endblock %}

{% block content %}
{% if form.non_field_errors %}
    {% for error in form.non_field_errors %}
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-2" role="alert">
            <p class="font-bold">Error!</p>
            <p class="block sm:inline">{{ error }}</p>
        </div>
    {% endfor %}
{% endif %}
<h1 class="font-mono font-bold text-3xl text-center pb-5 pt-10">Sign In</h1>
<hr>
<div class="w-full mt-10">
    <form method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        {% csrf_token %}
        {% for hidden_field in form.hidden_fields %}
            {{ hidden_field.errors }}
            {{ hidden_field }}
        {% endfor %}
        {% for field in form.visible_fields %}
        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="{{ field.id_for_label }}">
                {{ field.label }}
            </label>
            <input class="shadow appearance-none border border-gray-500 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="{{ field.name }}" id="{{ field.id_for_label }}" type="{{ field.widget_type }}">
        </div>
            {% if field.errors %}
                {% for error in field.errors %}
                <p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
                {% endfor %}
            {% endif %}
        {% endfor %}

        <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                Sign In
            </button>
        </div>
    </form>
</div>
{% endblock %}