{% load i18n %}
{% load account socialaccount %}
{% load static %}

<div 
  id="login-modal"
  class="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto bg-black/50 backdrop-blur-xs"
>
  <div class="w-full max-w-lg my-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 max-h-[90vh] overflow-y-auto">
    <div class="sticky top-0 flex justify-between p-6 bg-white border-b dark:bg-gray-800 dark:border-gray-700">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans "Welcome Back" %}</h2>
      <button 
        onclick="this.closest('#login-modal').remove()"
        class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="p-6">
      {% 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 %}

      {% include "account/partials/login_form.html" %}

      <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-hidden focus:underline"
          >
            {% trans "Sign up" %}
          </a>
        </p>
      </div>
    </div>
  </div>
</div>