{% extends "base/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% load static %}
{% load turnstile_tags %}

{% block title %}Login - ThrillWiki{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
  <div class="w-full max-w-lg">
    <div class="auth-card">
      <h1 class="auth-title">{% trans "Welcome Back" %}</h1>

      {% get_providers as socialaccount_providers %}
      {% if socialaccount_providers %}
      <div class="space-y-3">
        {% for provider in socialaccount_providers %}
        <a
          href="{% provider_login_url provider.id process='login' %}"
          class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
          role="button"
          tabindex="0"
          onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
        >
          {% if provider.id == 'google' %}
          <img
            src="{% static 'images/google-icon.svg' %}"
            alt="Google"
            class="w-5 h-5 mr-3"
          />
          <span>Continue with Google</span>
          {% elif provider.id == 'discord' %}
          <img
            src="{% static 'images/discord-icon.svg' %}"
            alt="Discord"
            class="w-5 h-5 mr-3"
          />
          <span>Continue with Discord</span>
          {% endif %}
        </a>
        {% endfor %}
      </div>

      <div class="auth-divider">
        <span>Or continue with email</span>
      </div>
      {% endif %}

      <form class="space-y-6" method="POST" action="{% url 'account_login' %}">
        {% 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"
              onkeydown="if(event.key === 'Enter') { this.click(); }"
            >
              {% 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>

      <div class="mt-6 text-sm text-center">
        <p class="text-gray-600 dark:text-gray-400">
          {% trans "Don't have an account?" %}
          <a
            href="{% url 'account_signup' %}"
            class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
            onkeydown="if(event.key === 'Enter') { this.click(); }"
          >
            {% trans "Sign up" %}
          </a>
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}