{% load i18n %}
{% load account socialaccount %}
{% load turnstile_tags %}

<form
  class="space-y-6"
  role="form"
  aria-label="{% trans 'Sign in to your account' %}"
  hx-post="{% url 'account_login' %}"
  hx-target="this"
  hx-swap="outerHTML"
  hx-indicator="#login-indicator"
>
  {% csrf_token %}
  {% if form.non_field_errors %}
  <div class="alert alert-error" role="alert">
    <div class="text-sm">{{ form.non_field_errors }}</div>
  </div>
  {% endif %}

  <fieldset class="space-y-6">
    <legend class="sr-only">{% trans "Login credentials" %}</legend>

    {% include 'forms/partials/form_field.html' with field=form.login label=_("Username or Email") %}

    {% include 'forms/partials/form_field.html' with field=form.password label=_("Password") %}
  </fieldset>

  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <input
        type="checkbox"
        name="remember"
        id="id_remember"
        class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700"
      />
      <label
        for="id_remember"
        class="block ml-2 text-sm text-gray-700 dark:text-gray-300"
      >
        {% trans "Remember me" %}
      </label>
    </div>

    <div class="text-sm">
      <a
        href="{% url 'account_reset_password' %}"
        class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-hidden focus:underline"
      >
        {% trans "Forgot Password?" %}
      </a>
    </div>
  </div>

  {% turnstile_widget %}
  {% if redirect_field_value %}
  <input
    type="hidden"
    name="{{ redirect_field_name }}"
    value="{{ redirect_field_value }}"
  />
  {% endif %}

  <div>
    <button type="submit" class="w-full btn-primary">
      <i class="mr-2 fas fa-sign-in-alt" aria-hidden="true"></i>
      {% trans "Sign In" %}
    </button>
  </div>
</form>

<!-- Loading indicator -->
<div id="login-indicator" class="htmx-indicator">
  <div class="flex items-center justify-center w-full py-4">
    <div class="w-8 h-8 border-4 rounded-full border-primary border-t-transparent animate-spin" role="status" aria-label="Loading"></div>
  </div>
</div>
