{{template "base" .}}
{{define "content"}}
<div class="auth-page">
    <h2>Sign in with AT Protocol</h2>
    {{if .Error}}
    <div class="alert alert-error">{{.Error}}</div>
    {{end}}
    <form method="post" action="/auth/atproto" class="auth-form">
        <label>
            <input type="text" name="handle" placeholder="Bluesky username or custom domain name" required autofocus
                   autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off">
        </label>
        <button type="submit" class="btn">Continue</button>
    </form>
    <p class="auth-switch">Don't have an AT Protocol account? <a href="https://bsky.app" target="_blank" rel="noopener">Create one at bsky.app</a> or <a href="https://eurosky.tech" target="_blank" rel="noopener">eurosky.tech</a>.</p>
</div>
{{end}}