{% comment %}
Enhanced Authentication Modal Component
Matches React frontend AuthDialog functionality with modal-based auth
{% endcomment %}

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

<!-- HTMX-driven Auth Modal Container -->
{# This modal no longer manages form submission client-side. Forms are fetched
   and submitted via HTMX using the account views endpoints (CustomLoginView/CustomSignupView). #}

<div id="auth-modal" class="fixed inset-0 z-50 hidden items-center justify-center" role="dialog" aria-modal="true" tabindex="-1" hx-on:keydown="if(event.key==='Escape'){ document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden'); }">
  <div id="auth-modal-overlay" class="fixed inset-0 bg-background/80 backdrop-blur-sm" onclick="document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden');"></div>

  <div id="auth-modal-content" class="relative w-full max-w-md mx-4 bg-background border rounded-lg shadow-lg" role="dialog" aria-modal="true">
    <button type="button" class="absolute top-4 right-4 p-2 text-muted-foreground hover:text-foreground rounded-md hover:bg-accent transition-colors auth-close" onclick="document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden');">
      <i class="fas fa-times w-4 h-4"></i>
    </button>

    <!-- Content will be loaded here via HTMX -->
    <div id="auth-modal-body" hx-swap-oob="true" hx-on:htmx:afterSwap="(function(){ var el=document.querySelector('#auth-modal-body input, #auth-modal-body button'); if(el){ el.focus(); } })()"></div>
  </div>
</div>

{# Example triggers (elsewhere in the app you can use hx-get to load the desired form into #auth-modal-body):
   <button hx-get="{% url 'account_login' %}" hx-target="#auth-modal-body" hx-swap="innerHTML" onclick="document.getElementById('auth-modal').classList.remove('hidden')">Sign in</button>
   <button hx-get="{% url 'account_signup' %}" hx-target="#auth-modal-body" hx-swap="innerHTML" onclick="document.getElementById('auth-modal').classList.remove('hidden')">Sign up</button>
   The login/signup views already return partials for HTMX requests (see `CustomLoginView` / `CustomSignupView`).
#}