{% set title = "Create an Account" %}
{% 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">Create an Account</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 %}
                    {% for e in error %}
                        {{ alerts.warning("Error", e) }}
                    {% endfor %}
                {% endif -%}

                <form method="post" enctype="multipart/form-data">

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

                </form>
            </div>
            <div class="text-center">
                <p class="text-gray-200 text-sm">
                    Already have an account?
                    <a href="/login" class="no-underline text-blue-500 font-bold">Sign In</a>
                </p>
            </div>
        </div>
    </div>
{% endblock %}