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

<form 
  class="space-y-6" 
  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">
    <div class="text-sm">{{ form.non_field_errors }}</div>
  </div>
  {% endif %}

  <div>
    <label for="id_login" class="form-label">
      {% trans "Username or Email" %}
    </label>
    <input
      type="text"
      name="login"
      id="id_login"
      required
      autocomplete="username email"
      class="form-input"
    />
    {% if form.login.errors %}
    <p class="form-error">{{ form.login.errors }}</p>
    {% endif %}
  </div>

  <div>
    <label for="id_password" class="form-label">
      {% trans "Password" %}
    </label>
    <input
      type="password"
      name="password"
      id="id_password"
      required
      autocomplete="current-password"
      class="form-input"
    />
    {% if form.password.errors %}
    <p class="form-error">{{ form.password.errors }}</p>
    {% endif %}
  </div>

  <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-none 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"></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"></div>
  </div>
</div>