{% set registrationEnabled = registration_enabled ?? true %}
<div class="modal fade" id="authModal" tabindex="-1" aria-labelledby="authModalLabel" aria-hidden="true" data-registration-enabled="{{ registrationEnabled ? '1' : '0' }}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="authModalLabel">Account</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div data-auth-panel="login" class="d-none">
          <form data-auth-login action="{{ path('app_login') }}" method="post" class="vstack gap-2">
            <div>
              <label class="form-label">Email</label>
              <input class="form-control" type="email" name="_username" required autocomplete="email" />
            </div>
            <div>
              <label class="form-label">Password</label>
              <input class="form-control" type="password" name="_password" required autocomplete="current-password" />
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="_remember_me" id="rememberMe" checked>
              <label class="form-check-label" for="rememberMe">Remember me</label>
            </div>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
            <input type="hidden" name="_target_path" value="" data-auth-target />
            <input type="hidden" name="_failure_path" value="" data-auth-failure />
            <button class="btn btn-success" type="submit">Login</button>
            <button class="btn btn-outline-success" type="button" data-auth-open-register {% if not registrationEnabled %}disabled title="Registration is currently disabled"{% endif %}>Sign up</button>
          </form>
            <div class="text-danger small mt-2 d-none" data-auth-login-error></div>
        </div>
        <div data-auth-panel="register" class="d-none">
          {% if registrationEnabled %}
            <form data-auth-register action="{{ path('app_register') }}" method="post" class="vstack gap-2">
              <input type="hidden" name="registration_form[_token]" value="{{ csrf_token('registration_form') }}" />
              <div><label class="form-label">Email</label><input class="form-control" type="email" name="registration_form[email]" required /></div>
              <div><label class="form-label">Display name (optional)</label><input class="form-control" type="text" name="registration_form[displayName]" maxlength="120" /></div>
              <div><label class="form-label">Password</label><input class="form-control" type="password" name="registration_form[plainPassword][first]" minlength="8" required /></div>
              <div><label class="form-label">Repeat password</label><input class="form-control" type="password" name="registration_form[plainPassword][second]" minlength="8" required /></div>
              <button class="btn btn-success" type="submit">Create account</button>
              <button class="btn btn-outline-secondary" type="button" data-auth-open-login>Back to login</button>
            </form>
            <div class="text-danger small mt-2 d-none" data-auth-register-error></div>
          {% else %}
            <div class="alert alert-info mb-0">Registration is currently disabled. Please check back later.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function(){
    const modalEl = document.getElementById('authModal');
    if (!modalEl) return;
    const bsModal = new bootstrap.Modal(modalEl);
    const panels = modalEl.querySelectorAll('[data-auth-panel]');
    function showPanel(kind){
      panels.forEach(p => p.classList.toggle('d-none', p.getAttribute('data-auth-panel') !== kind));
      bsModal.show();
    }
    const registrationEnabled = modalEl.getAttribute('data-registration-enabled') === '1';
    const registerToggle = modalEl.querySelector('[data-auth-open-register]');
    if (registerToggle) {
      registerToggle.addEventListener('click', (e) => {
        if (!registrationEnabled) {
          e.preventDefault();
          if (loginError) {
            loginError.textContent = 'Registration is currently disabled.';
            loginError.classList.remove('d-none');
          }
          return;
        }
        showPanel('register');
      });
    }
    modalEl.querySelector('[data-auth-open-login]')?.addEventListener('click', ()=> showPanel('login'));
    document.querySelectorAll('[data-open-auth]')?.forEach(btn => {
      btn.addEventListener('click', (e)=>{ e.preventDefault(); showPanel(btn.getAttribute('data-open-auth') || 'login'); });
    });

    const currentUrl = location.pathname + location.search + location.hash;
    modalEl.querySelector('[data-auth-target]')?.setAttribute('value', currentUrl);
    modalEl.querySelector('[data-auth-failure]')?.setAttribute('value', currentUrl);

    // AJAX login
    const loginForm = modalEl.querySelector('form[data-auth-login]');
    const loginError = modalEl.querySelector('[data-auth-login-error]');
    if (loginForm) {
      loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        if (loginError) { loginError.classList.add('d-none'); }
        try {
          const resp = await fetch(loginForm.action, { method: 'POST', body: new FormData(loginForm), credentials: 'same-origin' });
          if (resp.ok || resp.status === 302) {
            bsModal.hide();
            location.reload();
          } else {
            if (loginError) { loginError.textContent = 'Login failed. Please check your credentials.'; loginError.classList.remove('d-none'); }
          }
        } catch (_) {
          if (loginError) { loginError.textContent = 'Network error. Please try again.'; loginError.classList.remove('d-none'); }
        }
      });
    }

    // AJAX registration
    const regForm = modalEl.querySelector('form[data-auth-register]');
    const regError = modalEl.querySelector('[data-auth-register-error]');

    if (regForm && registrationEnabled) {
      regForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        if (regError) { regError.classList.add('d-none'); }
        try {
          const resp = await fetch(regForm.action, { method: 'POST', body: new FormData(regForm), credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
          if (resp.ok) {
            showPanel('login');
            if (loginError) { loginError.textContent = 'Account created. You can now sign in.'; loginError.classList.remove('d-none'); }
          } else if (resp.status === 422) {
            const data = await resp.json();
            const messages = Object.values(data.errors || {}).flat().join(' ');
            if (regError) { regError.textContent = messages || 'Please correct the highlighted fields.'; regError.classList.remove('d-none'); }
          } else {
            if (regError) { regError.textContent = 'Registration failed. Please try again.'; regError.classList.remove('d-none'); }
          }
        } catch (_) {
          if (regError) { regError.textContent = 'Network error. Please try again.'; regError.classList.remove('d-none'); }
        }
      });
    }

    // auto-open via ?auth=
    const params = new URLSearchParams(location.search);
    const authParam = params.get('auth');
    if (authParam === 'login' || authParam === 'register') {
      showPanel(authParam);
    }
    window.__openAuthModal = showPanel;
  })();
</script>