{% extends  'auth_base.html' %}

{% block content %}
<div class="self-center flex-1 flex flex-col items-center">
    <div class="bg-white rounded shadow w-auto w-1/3 px-4 py-6">
        <!-- Display messages -->
        {% if messages %}
        {% for message in messages %}
        <div
            class="mb-2 p-2 {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}bg-red-600{% else %}bg-indigo-600{% endif %} text-white">
            <span {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</span>
        </div>
        {% endfor %}
        {% endif %}
        <!-- Authentication form -->
        <form action="{% url 'junopass:login' %}" method="POST">
            {% csrf_token %}
            <h1 class="text-2xl">Log In</h1>
            <div class="pt-4 pb-2">
                <label>{{form.identifier.label}}</label>
                <div class="py-2">
                    <input type="text" name="identifier" required
                        class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
                        placeholder="e.g name@company.com"
                        value="{% if form.identifier.value %}{{form.identifier.value}}{% endif%}">
                </div>
                <!-- Render form errors -->
                {% if form.errors %}
                <div class="mb-2 p-2 bg-red-600 text-white">
                    {{ form.identifier.errors }}
                </div>
                {% endif %}
            </div>
            <div class="pb-2">
                <button type="submit"
                    class="rounded shadow w-full font-bold px-3 py-2 bg-indigo-900 text-indigo-100 hover:bg-indigo-800">
                    Log In Without Password
                </button>
                <div class="text-center pt-2">
                    <a href="https://junopass.com" target="_blank" class="text-sm text-gray-500">Powered by JunoPass</a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}