{% extends "core/base.html" %}
{% load widget_tweaks %}
{% load static %}

{% block content %}

{#    <div class="container">#}
{#    {% if form.errors %}#}
{#        <p>Your username and password didn't match. Please try again.</p>#}
{#    {% endif %}#}
{##}
{#    {% if next %}#}
{#        {% if user.is_authenticated %}#}
{#            <p>Your account doesn't have access to this page. To proceed,#}
{#                please login with an account that has access.</p>#}
{#        {% else %}#}
{#            <p>Please login to see this page.</p>#}
{#        {% endif %}#}
{#    {% endif %}#}

    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
            <p class="text-center font-bold text-3xl">Defence Nuclear Security Regulator Engagement Database (DED)</p>
            <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your
                account</h2>
        </div>

        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <form class="space-y-6" action="{% url 'login' %}" method="POST">
                {% csrf_token %}
                <div>
{#                    <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>#}
                     {{ form.username.label_tag }}
                    <div class="mt-2">
{#                        <input id="email" name="email" type="email" autocomplete="email" required#}
{#                               class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">#}
                        {% render_field form.username class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
                    </div>
                </div>

                <div>
                    <div class="flex items-center justify-between">
{#                        <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>#}
                        {{ form.password.label_tag }}
                        <div class="text-sm">
                            <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
                        </div>
                    </div>
                    <div class="mt-2">
{#                        <input id="password" name="password" type="password" autocomplete="current-password" required#}
{#                               class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">#}
                        {% render_field  form.password class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
                    </div>
                </div>

                <div>
                    <button type="submit"
                            class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                        Sign in
                    </button>
                </div>
            </form>
        </div>
    </div>


{% endblock content %}
</div>