{% extends "layout.askama.html" %}

{% block content %}
<div class="hero min-h-[60vh]">
    <div class="hero-content flex-col lg:flex-row-reverse">
        <div class="text-center lg:text-left lg:ml-8">
            <h1 class="text-5xl font-bold">Login to continue</h1>
            <p class="py-6">Enter your atmosphere handle to track your progress and complete daily challenges.</p>
        </div>
        <div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
            <div class="card-body">
                {% if let Some(err) = error %}
                <div class="alert alert-error mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <span>{{ err }}</span>
                </div>
                {% endif %}

                <form id="handle-form" action="/redirect/login" method="GET" >
                    <div class="">
                        <fieldset class="fieldset">
                          <legend class="fieldset-legend">Atmosphere Handle</legend>
                          <input id="handle-input" name="handle" type="text" class="input w-full" placeholder="alice.bsky.social" required/>
                        </fieldset>

                    </div>
                    <div class="mt-6">
                        <button class="btn btn-primary" type="submit">Continue</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}