{% set title = "Sign In" %}
{% extends "__base__.html" %}

{% block content %}
    <div class="centered container mx-auto flex justify-center items-center">
        <div class="w-full md:w-1/2 lg:w-1/3 m-4">
            <h1 class="font-semibold text-lg mb-6 text-center">Sign In</h1>
            <div
                class="bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
            >

                {%- if error %}
                    {% import "components/alert.html" as alerts %}
                    {{ alerts.warning("Error", error) }}
                {% endif -%}

                <form method="post">

                    {% import "components/forms.html" as forms %}
                    {{ forms.input({
                        "id": "username", "label": "Username",
                        "placeholder": "Your Username", "autocomplete": "username"
                    }) }}
                    {{ forms.input({
                        "id": "password", "label": "Password", "type": "password",
                        "placeholder": "Your Password", "autocomplete": "current-password"
                    }) }}
                    {{ forms.submit("Sign In") }}

                </form>
            </div>
            <div class="text-center">
                <p class="text-gray-200 text-sm">
                    Don't have an account?
                    <a href="/register" class="no-underline text-blue-500 font-bold">Create an Account</a>
                </p>
            </div>
        </div>
    </div>
{% endblock %}