{% extends 'base.html' %}

{% block head %}
<title>Indonesian Lyrics Classification By Age Group - Register</title>
{% endblock %}

{% block body %}
<section class="bg-white">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
        <a href="#" class="flex flex-col gap-3 items-center mb-6 text-2xl font-semibold text-gray-900">
            <div class="flex">
                <img src="/static/img/Logo PNJ.png" class="h-8" alt="Politeknik Negeri Jakarta">
                <img src="/static/img/BLU SPEED LOGO.png" class="h-8" alt="Politeknik Negeri Jakarta">
                <img src="/static/img/Logo Kemendikbud.png" class="h-8" alt="Politeknik Negeri Jakarta">
                <img src="/static/img/Logo Kampus Merdeka.png" class="h-8" alt="Politeknik Negeri Jakarta">
                <img src="/static/img/Logo Vokasi Menguatkan.png" class="h-8" alt="Politeknik Negeri Jakarta">
            </div>
            <h1
                class="text-center text-2xl font-extrabold text-slate-900 leading-tight tracking-tight text-gray-900 md:text-3xl">
                Indonesian Lyrics Classification By Age Group
            </h1>
        </a>
        <div class="w-full rounded-lg shadow-sm inset-shadow-sm md:mt-0 sm:max-w-md xl:p-0">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
                    Sign up your new account
                </h1>
                {% if error %}
                <div id="toast-default" class="flex p-4 mb-4 rounded-lg bg-red-100" role="alert">
                    <div class="text-sm text-red-800" role="alert">
                        {{ error }}
                    </div>
                    <button type="button"
                        class="ms-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-red-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:text-red-800 inline-flex items-center justify-center h-8 w-8"
                        data-dismiss-target="#toast-default" aria-label="Close">
                        <span class="sr-only">Close</span>
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                    </button>
                </div>
                {% endif %}
                <form class="space-y-4 md:space-y-6" action="/register" method="post">
                    <div>
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Email</label>
                        <input type="email" name="email" id="email"
                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                            placeholder="name@gmail.com" required="" value="{{ email }}">
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900">New Password</label>
                        <input type="password" name="password" id="password" placeholder="••••••••"
                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                            required="" value="{{ password }}">
                    </div>
                    <div>
                        <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900">Confirm
                            Password</label>
                        <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••"
                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                            required="" value="{{ confirm_password }}">
                    </div>
                    <button type="submit"
                        class="flex-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
                        Sign up</button>
                    <p class="text-sm font-light text-gray-500">
                        Already have an account? <a href="/login"
                            class="font-medium text-primary-600 hover:underline">Sign
                            in</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</section>
<footer class="flex flex-row justify-center items-center">
    <div class="absolute bottom-4 text-gray-500">By Michael Natanael</div>
</footer>
{% endblock %}