{% extends "base.html" %}
{% block title %}{{ tr.t("sign-in") }} - Cook{% endblock %}
{% block content %}
<div class="max-w-sm mx-auto">
<h1 class="text-display font-bold text-text mb-2">{{ tr.t("sign-in") }}</h1>
<p class="text-muted mb-8">{{ tr.t("sign-in-intro") }}</p>
{% if failed %}
<div class="mb-6 card p-4 border-l-[3px] border-l-danger bg-danger-soft" role="alert">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-danger shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-text">{{ tr.t("sign-in-failed") }}</p>
</div>
</div>
{% endif %}
<form action="{{ prefix }}/login" method="POST" class="space-y-6">
<input type="hidden" name="next" value="{{ next }}">
<div>
<label for="username" class="block text-sm font-medium text-muted mb-2">
{{ tr.t("sign-in-username") }}
</label>
<input
type="text"
id="username"
name="username"
required
autocomplete="username"
autocapitalize="none"
spellcheck="false"
value="{{ username }}"
{% if username.is_empty() %}autofocus{% endif %}
class="w-full px-4 py-3 border border-line rounded-[var(--radius-control)] bg-surface text-text outline-hidden focus:border-accent focus:shadow-[0_0_0_2px_var(--accent-soft)]"
>
</div>
<div>
<label for="password" class="block text-sm font-medium text-muted mb-2">
{{ tr.t("sign-in-password") }}
</label>
<input
type="password"
id="password"
name="password"
required
autocomplete="current-password"
{% if !username.is_empty() %}autofocus{% endif %}
class="w-full px-4 py-3 border {% if failed %}border-danger{% else %}border-line{% endif %} rounded-[var(--radius-control)] bg-surface text-text outline-hidden focus:border-accent focus:shadow-[0_0_0_2px_var(--accent-soft)]"
>
</div>
<div class="flex gap-4">
<a href="{{ prefix }}/" class="btn">
{{ tr.t("action-cancel") }}
</a>
<button type="submit" class="btn btn-primary">
{{ tr.t("sign-in") }}
</button>
</div>
</form>
</div>
{% endblock %}