{% extends "base.html" %}

{% block title %}Sign In - Lamb{% endblock %}

{% block body %}
<main class="flex items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
    <section class="sketch-border paper-card w-full max-w-md bg-base-100 p-7 sm:p-8">
        <p class="hand-title text-center text-sm font-semibold uppercase tracking-wide text-stone-700">Welcome Back</p>
        <h1 class="title-font mt-2 text-center text-5xl text-stone-900">Sign in to Lamb</h1>

        <form method="post" class="mt-7 space-y-5">
            {% csrf_token %}

            {% if form.errors %}
            <div class="alert alert-error sketch-border bg-red-50 text-red-900">
                <span>Please correct the errors below: {{ form.errors }}</span>
            </div>
            {% endif %}

            {% if next %}
            <input type="hidden" name="next" value="{{ next }}">
            {% endif %}

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Username or email</span>
                <input
                    id="id_username"
                    name="username"
                    type="text"
                    required
                    class="input input-bordered sketch-border w-full rounded-2xl bg-white">
            </label>

            <label class="form-control w-full">
                <span class="label-text mb-1 font-semibold text-stone-800">Password</span>
                <input
                    id="id_password"
                    name="password"
                    type="password"
                    required
                    class="input input-bordered sketch-border w-full rounded-2xl bg-white">
            </label>

            <button type="submit" class="btn sketch-border w-full border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">
                Sign in
            </button>
        </form>

        <div class="mt-5 text-center">
            <a href="/" class="hand-title text-sm font-semibold text-stone-700 underline decoration-stone-700/50 underline-offset-4 hover:text-stone-950">
                ← Back to home
            </a>
        </div>
    </section>
</main>
{% endblock %}