{% extends "accounts/_layout.html" %}
{% block title %}Connexion · {{ site.site_name }}{% endblock %}
{% block auth_content %}
<h1 class="text-2xl font-extrabold text-brand-900">Connexion</h1>
<p class="mt-1 mb-8 text-sm text-slate-500">Accédez à l'espace de rédaction.</p>
<form method="post" class="space-y-5" novalidate>
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ next }}">
  {% for e in form.non_field_errors %}<c-alert type="error">{{ e }}</c-alert>{% endfor %}
  <c-field :field="form.username" />
  <div x-data="{ show: false }">
    <div class="mb-1.5 flex items-center justify-between">
      <label for="{{ form.password.id_for_label }}" class="form-label !mb-0">Mot de passe</label>
      <a href="{% url 'accounts:password_reset' %}" class="text-xs font-semibold text-brand-700 hover:underline">Mot de passe oublié ?</a>
    </div>
    <div class="relative">
      <input :type="show ? 'text' : 'password'" type="password" name="password" id="{{ form.password.id_for_label }}" autocomplete="current-password" required class="form-input pr-11">
      <button type="button" class="absolute inset-y-0 right-0 px-3 text-slate-400 hover:text-brand-800" @click="show = !show" :aria-label="show ? 'Masquer' : 'Afficher'">{% icon "eye" "size-5" %}</button>
    </div>
    {% for e in form.password.errors %}<p class="form-error">{{ e }}</p>{% endfor %}
  </div>
  <c-field :field="form.remember" />
  <button class="btn btn-primary btn-lg w-full">Se connecter</button>
</form>
<p class="mt-8 text-center text-sm text-slate-500"><a href="{% url 'public:home' %}" class="font-semibold text-brand-700 hover:underline">← Retour au site</a></p>
{% endblock %}