{% extends "accounts/base_unauthenticated.html" %}

{% block content %}
  <form action="{% url "account:login" %}" method="post" autocomplete="off" novalidate>
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ next }}">

    {% if form.errors %}
      {% for error in form.non_field_errors %}
        <c-alert level="error">{{ error }}</c-alert>
      {% endfor %}
    {% elif next %}
      <c-alert level="warning">
        {% if user.is_authenticated %}
          Votre compte n'a pas les droits d'accès à cette page.
        {% else %}
          Veuillez vous connecter pour voir cette page.
        {% endif %}
      </c-alert>
    {% endif %}

    <div class="mb-6">
      {{ form.username.as_field_group }}
    </div>
    <div class="mb-1">
      {{ form.password.as_field_group }}
    </div>

    <div class="text-end">
      <a href="{% url "account:password_reset" %}" class="text-sm text-gray-800 underline underline-offset-2 dark:text-gray-200 dark:hover:text-white hover:text-black hover:no-underline">
        Mot de passe oublié ?
      </a>
    </div>

    <div class="mt-8">
      <button type="submit" class="w-full button button-primary">Se connecter</button>
    </div>
  </form>

  <div class="relative my-4">
    <div class="absolute inset-0 flex items-center" aria-hidden="true">
      <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
    </div>
    <div class="relative flex justify-center font-medium">
      <span class="bg-gray-50 px-6 dark:bg-gray-900">OU</span>
    </div>
  </div>
  <a href="{% url "account:register" %}" class="w-full button button-secondary">Créer mon compte…</a>
{% endblock %}