@if(session)
<!-- logged in -->
<nav class="navbar navbar-expand-lg">

  <!-- Brand: always visible, flush left -->
  <a class="navbar-brand" href="/">
    @if(custom_brand_image)
      <img id="navbar-logo" src="{{ custom_brand_image }}" alt="{{ domain }}" onload="if(window.syncNavbarHeight)window.syncNavbarHeight();" style="max-height: 40px; vertical-align: middle; max-width: 180px; width: auto;">
    @else
      <span class="f0ck">{{ custom_navbar_brand_text || domain }}</span>
    @endif
  </a>

  <!-- Nav links: desktop always-on, mobile hidden until toggled -->
  <div class="nav-collapse" id="navbarContent">
      <div class="nav-links">
        @if(!session.is_anon || (enable_anonymous_access && anon_permissions.upload))
        <a id="nav-upload-link" style="cursor:pointer;"><i class="fa-solid fa-angle-up"></i> {{ t('nav.upload') }}</a>
        @endif
        @if(meme_creator)
        <a id="nav-meme-link" href="/meme"><i class="fa-regular fa-image"></i> {{ t('nav.meme') }}</a>
        @endif
        @if(halls_enabled)
        <div class="nav-user-dropdown nav-halls-dropdown">
          <a href="/halls" class="nav-halls-btn" title="{{ t('nav.halls') }}">
            <i class="fa-solid fa-layer-group"></i>
          </a>
        </div>
        @endif
        <a href="/tags" title="{{ t('nav.tags') }}"><i class="fa-solid fa-tags"></i></a>
        @if(session.can_chan)
        <a href="/4/wsg/catalogue" id="nav-chan-link" title="4chan Viewer & Rehost" style="color: #4ade80;"><i class="fa-solid fa-clover"></i></a>
        @endif
        @if(abyss_enabled)
        <a href="/abyss" title="{{ t('nav.abyss') }}"><i class="fa-solid fa-dice-d6"></i></a>
        @endif
        <a href="#" id="nav-search-btn" title="{{ t('nav.search') }}"><i class="fa-solid fa-magnifying-glass"></i></a>
      </div>
    </div>

    <!-- Right controls: always visible, flush right -->
    <div class="nav-right-group">

      <!-- Avatar dropdown -->
      <div class="nav-user-dropdown">
        <button class="nav-user-btn nav-avatar-btn" id="nav-user-toggle">
          @if(session.is_anon)
            <img class="nav-avatar-img" src="/a/default.png" onclick="event.stopPropagation(); const u = '{{ session.login.toLowerCase() }}'; if(typeof window.loadPageAjax==='function'){ window.loadPageAjax('/user/' + u, true); } else { window.location.href='/user/' + u; }" title="{{ session.login }}">
          @elseif(session.avatar_file)
            <img class="nav-avatar-img" src="/a/{{ session.avatar_file }}" onerror="this.src='/a/default.png'" onclick="event.stopPropagation(); if(typeof window.loadPageAjax==='function'){ window.loadPageAjax('/user/{!! session.user.toLowerCase() !!}', true); } else { window.location.href='/user/{!! session.user.toLowerCase() !!}'; }" title="{{ session.user }}">
          @elseif(session.avatar && session.avatar > 0)
            <img class="nav-avatar-img" src="/t/{{ session.avatar }}.webp" onerror="this.src='/a/default.png'" onclick="event.stopPropagation(); if(typeof window.loadPageAjax==='function'){ window.loadPageAjax('/user/{!! session.user.toLowerCase() !!}', true); } else { window.location.href='/user/{!! session.user.toLowerCase() !!}'; }" title="{{ session.user }}">
          @else
            <img class="nav-avatar-img" src="/a/default.png" onclick="event.stopPropagation(); if(typeof window.loadPageAjax==='function'){ window.loadPageAjax('/user/{!! session.user.toLowerCase() !!}', true); } else { window.location.href='/user/{!! session.user.toLowerCase() !!}'; }" title="{{ session.user }}">
          @endif
          <span class="nav-avatar-name" id="nav-display-name" @if(session.username_color)style="color: {{ session.username_color }}"@endif>{!! session.display_name || session.user !!}</span>
          <span class="nav-avatar-caret">▾</span>
        </button>
        <div class="nav-user-menu" id="nav-user-menu">
          @if(session.is_anon)
          <a href="/user/{{ session.login.toLowerCase() }}">{{ t('nav.profile') }}</a>
          @else
          <a href="/user/{!! session.user.toLowerCase() !!}">{{ t('nav.profile') }}</a>
          @if(userhalls_enabled)
          <a href="/user/{!! session.user.toLowerCase() !!}/halls">{{ t('nav.my_halls') }}</a>
          @endif
          @endif
          <a href="/pending" class="nav-menu-pending">Pending@if(typeof session.own_pending_count === 'number')<span class="nav-menu-count @if(session.own_pending_count === 0)is-zero@endif" title="{{ session.own_pending_count }} upload(s) awaiting approval">{{ session.own_pending_count }}</span>@endif</a>
          @if(enable_anonymous_access && session.is_anon)
          <a href="#" id="nav-user-anon-identity-btn" style="white-space: nowrap;" onclick="event.preventDefault(); if(window.f0ckAnonPasskey) { window.f0ckAnonPasskey.openModal(); } else { const m = document.getElementById('anon-passkey-modal'); if (m) m.style.display='flex'; }">Passkey Identity</a>
          @endif
          <a href="/user/{{ (session.is_anon && session.login ? session.login : session.user).toLowerCase() }}/favs" class="mobile-only">{{ t('nav.favs') }}</a>
          <a href="/settings" class="mobile-only" data-page-modal title="{{ t('nav.settings') }}">{{ t('nav.settings') }}</a>
          <div class="nav-user-divider"></div>
          <a href="/logout" class="mobile-only">{{ t('nav.logout') }}</a>
        </div>
      </div>

      <!-- Notification bell -->
      <div id="nav-notifications" class="nav-item-rel">
        <a href="#" id="nav-notif-btn" title="Notifications">
          <i class="fa-solid fa-bell"></i>
          <span class="notif-count" style="display:none">0</span>
        </a>
        <div id="notif-dropdown" class="notif-dropdown">
          <div class="notif-header">
            <div class="notif-tabs">
              @if(enable_comments)
              <button class="notif-tab active" data-tab="user">{{ t('nav.notif_tab_user') }} <span class="notif-tab-badge" id="notif-tab-badge-user" style="display:none">0</span></button>
              <button class="notif-tab" data-tab="system">{{ t('nav.notif_tab_system') }} <span class="notif-tab-badge" id="notif-tab-badge-system" style="display:none">0</span></button>
              @else
              <button class="notif-tab active" data-tab="system">{{ t('nav.notif_tab_system') }} <span class="notif-tab-badge" id="notif-tab-badge-system" style="display:none">0</span></button>
              @endif
              @if(session && session.admin)
              <button class="notif-tab" data-tab="admin">Admin <span class="notif-tab-badge" id="notif-tab-badge-admin" style="display:none">0</span></button>
              @endif
            </div>
            <button id="mark-all-read" title="{{ t('nav.mark_all_read') }}"><i class="fa-solid fa-check-double"></i></button>
          </div>
          @if(enable_comments)
          <div class="notif-list" data-active-tab="user">
          @else
          <div class="notif-list" data-active-tab="system">
          @endif
            <div class="notif-empty">{{ t('nav.no_notifications') }}</div>
          </div>
          <div class="notif-footer">
            <a href="/notifications" class="view-all-notifs">{{ t('nav.view_all_notifications') }}</a>
          </div>
          @if(enable_comments)
          <div class="submanage">
            <a href="/subscriptions">{{ t('nav.manage_subscriptions') }}</a>
          </div>
          @endif
        </div>
      </div>

      <!-- Quick Favs -->
      <a href="/user/{{ (session.is_anon && session.login ? session.login : session.user).toLowerCase() }}/favs" title="Favorites" class="desktop-only"><i class="fa-solid fa-heart"></i></a>

      <!-- DM -->
      @if(private_messages && !session.is_anon)
      <div id="nav-dm" class="nav-item-rel">
        <a href="/messages" id="nav-dm-btn" title="Direct Messages">
          <i class="fa-solid fa-envelope"></i>
          <span id="dm-badge" class="notif-count-dm" style="display:none">0</span>
        </a>
      </div>
      @endif

      <!-- Quick Settings -->
      <a href="/settings" title="Settings" class="desktop-only" data-page-modal><i class="fa-solid fa-gear"></i></a>

      <!-- Filter -->
      @if(!session.is_anon || (enable_anonymous_access && anon_permissions.filter))
      <a href="#" id="nav-filter-btn" title="Filter" style="position: relative; display: inline-flex; align-items: center; justify-content: center; z-index: 1000;">
        <i class="fa-solid fa-filter"></i>
        @if(session.mode == 0)
        <span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
        @elseif(session.mode == 1)
        <span id="nav-filter-badge" class="filter-badge filter-badge-nsfw">NSFW</span>
        @elseif(session.mode == 4)
        <span id="nav-filter-badge" class="filter-badge filter-badge-nsfl">NSFL</span>
        @elseif(session.mode == 2)
        <span id="nav-filter-badge" class="filter-badge filter-badge-unt">UNT</span>
        @elseif(session.mode == 3)
        <span id="nav-filter-badge" class="filter-badge filter-badge-all">ALL</span>
        @else
        <span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
        @endif
      </a>
      @endif

      <!-- Logout -->
      <a href="/logout" title="Logout" class="desktop-only"><i class="fa-solid fa-right-from-bracket"></i></a>

      <!-- Hamburger: mobile only -->
      <button class="navbar-toggler" type="button" id="nav-toggler"
        onclick="document.getElementById('navbarContent').classList.toggle('show'); this.classList.toggle('is-open')">
        <span></span><span></span><span></span>
      </button>

  </div><!-- /.nav-right-group -->

  <!-- MOTD: below the nav row -->
  <div class="motd-container" id="motd-container" @if(typeof motd==='undefined' || motd==='' ) style="display:none" @endif>
    <span class="motd-content" id="motd-display"></span>
    <div id="motd-data" style="display:none">@if(typeof motd !== 'undefined'){!! motd !!}@endif</div>
    <div id="user-pref-show-motd" style="display:none">@if(session.show_motd !== false)true@else false @endif</div>
  </div>

</nav>

@if(session.admin || session._is_impersonating || session._preview_role)
<!-- Admin Bar (Bottom, hotkey-activated) -->
<div class="admin-bar" id="admin-bar" data-preview-role="{{ session._preview_role || 'admin' }}">
  @if(session._is_impersonating)
  <!-- Impersonation Banner -->
  <div class="admin-bar-impersonate-notice">
    <span class="admin-bar-imp-icon"><i class="fa-solid fa-user-secret"></i></span>
    <span class="admin-bar-imp-text">Viewing as <strong>{!! session.user !!}</strong></span>
    <span class="admin-bar-imp-hint">— all actions are performed as this user</span>
    <button class="admin-bar-exit-btn" id="admin-bar-exit-impersonate" title="Exit impersonation and return to your admin session">
      <i class="fa-solid fa-door-open"></i> Exit
    </button>
    <button class="admin-bar-close-btn" id="admin-bar-close-imp" title="Close admin bar (^ or ~)" aria-label="Close admin bar" style="margin-left: 8px;">
      <i class="fa-solid fa-xmark"></i>
    </button>
  </div>
  @else
  <!-- Normal Admin Bar -->
  <div class="admin-bar-inner">

    <div class="admin-bar-links">
      <a href="/admin" class="admin-bar-link" title="Admin panel">
        <i class="fa-solid fa-cog"></i> Admin
        @if(typeof session.pending_count !== 'undefined' && session.pending_count > 0)
        <span class="admin-bar-badge">{{ session.pending_count }}</span>
        @endif
      </a>
      <a href="/admin/approve" class="admin-bar-link" title="Pending approvals">
        <i class="fa-solid fa-clock"></i> Pending
        @if(typeof session.pending_count !== 'undefined' && session.pending_count > 0)
        <span class="admin-bar-badge">{{ session.pending_count }}</span>
        @endif
      </a>
      <a href="/mod" class="admin-bar-link" title="Moderator panel">
        <i class="fa-solid fa-gavel"></i> Mod
      </a>
      <a href="/admin/audit" class="admin-bar-link" title="Audit log">
        <i class="fa-solid fa-scroll"></i> Audit
      </a>
    </div>

    <!-- Preview As role toggle (right-aligned) -->
    <div class="admin-bar-preview" id="admin-bar-preview-wrap" style="margin-left: auto;">
      <span class="admin-bar-preview-label"><i class="fa-solid fa-eye" style="opacity:0.6;"></i> Preview:</span>
      <div class="admin-bar-preview-pills" id="admin-bar-preview-pills">
        <button class="admin-bar-preview-pill active" data-role="admin" title="View as yourself (admin)">Admin</button>
        <button class="admin-bar-preview-pill" data-role="mod" title="Simulate moderator view">Mod</button>
        <button class="admin-bar-preview-pill" data-role="user" title="Simulate regular user view">User</button>
      </div>
    </div>

    <button class="admin-bar-close-btn" id="admin-bar-close" title="Close admin bar (^ or ~)" aria-label="Close admin bar">
      <i class="fa-solid fa-xmark"></i>
    </button>
  </div>
  @endif
</div>
@endif

<!-- Floating exit-preview pill (visible only during role preview) -->
@if(session.admin || session._preview_role)
<div id="admin-preview-exit-pill" style="display:none;">
  <i class="fa-solid fa-eye"></i>
  <span id="admin-preview-exit-label">Previewing as User</span>
  <button id="admin-preview-exit-btn" title="Return to admin view"><i class="fa-solid fa-xmark"></i> Exit</button>
</div>
@endif

@else
<!-- not logged in -->
@if(!private_society)
<nav class="navbar navbar-expand-lg">

  <a class="navbar-brand" href="/">
    @if(custom_brand_image)
      <img id="navbar-logo" src="{{ custom_brand_image }}" alt="{{ domain }}" onload="if(window.syncNavbarHeight)window.syncNavbarHeight();" style="max-height: 40px; vertical-align: middle; max-width: 180px; width: auto;">
    @else
      <span class="f0ck">{{ custom_navbar_brand_text || domain }}</span>
    @endif
  </a>

  <div class="nav-collapse nav-collapse-guest" id="navbarContent">
    <div class="nav-links">
      <a href="/tags" title="Tags"><i class="fa-solid fa-tags"></i></a>
      @if(halls_enabled)
      <div class="">
        <a href="/halls" class="nav-halls-btn" title="Halls">
          <i class="fa-solid fa-layer-group"></i>
        </a>
        <div class="nav-user-menu">
          <a href="/halls" style="font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 5px;"><i class="fa-solid fa-building-columns"></i> Overview</a>
          @if(typeof halls !== 'undefined' && halls.length > 0)
            @each(halls as h)
              <a href="/h/{{ h.slug }}">{{ h.name }}</a>
            @endeach
          @else
            <a href="/h/legendary">Legendary</a>
          @endif
        </div>
      </div>
      @endif
      @if(abyss_enabled)
      <a href="/abyss" title="Abyss"><i class="fa-solid fa-dice-d6"></i></a>
      @endif
      <a href="#" id="nav-search-btn" title="Search"><i class="fa-solid fa-magnifying-glass"></i></a>

    </div>
  </div>

  <div class="nav-right-group">
    <div class="nav-user-dropdown">
      <button class="nav-user-btn" id="nav-visitor-toggle">
        <i id="nav-visitor-icon" class="fa-solid @if(enable_anonymous_access && session && session.is_anon) fa-user-secret @else fa-user @endif"></i>
        <span id="nav-anon-label">@if(enable_anonymous_access && session && session.is_anon)anonymous@else guest @endif</span>
        <span class="nav-avatar-caret">▾</span>
      </button>
      <div class="nav-user-menu" id="nav-visitor-menu" style="min-width: 100%; width: max-content; white-space: nowrap;">
        @if(enable_anonymous_access && session && session.is_anon)
        <a href="/favs" id="nav-guest-favs-link" class="mobile-only">{{ t('nav.favs') }}</a>
        @endif
        @if(enable_anonymous_access)

        <a href="#" id="nav-anon-identity-btn" @if(!session || !session.is_anon) style="display:none;" @endif onclick="event.preventDefault(); if(window.f0ckAnonPasskey) { window.f0ckAnonPasskey.openModal(); } else { const m = document.getElementById('anon-passkey-modal'); if (m) m.style.display='flex'; }"><i class="fa-solid fa-fingerprint"></i> Passkey Identity</a>
        <a href="/settings" id="nav-anon-settings-btn" data-page-modal title="Settings" @if(!session || !session.is_anon) style="display:none;" @endif><i class="fa-solid fa-gear"></i> Settings</a>
        @endif
        <a href="#" id="nav-login-btn">{{ t('nav.login') }}</a>
        @if(registration_open)
        <a href="#" id="nav-register-btn">{{ t('nav.register') }}</a>
        @endif
        @if(enable_anonymous_access)
        <div class="nav-user-divider" id="nav-anon-divider" @if(!session || !session.is_anon) style="display:none;" @endif></div>
        <a href="#" id="nav-anon-logout-btn" @if(!session || !session.is_anon) style="display:none;" @endif><i class="fa-solid fa-right-from-bracket"></i> Logout (Guest)</a>
        @endif
      </div>
    </div>
    @if(enable_anonymous_access && session && session.is_anon)
    <!-- Quick Favs for Anon -->
    <a href="/favs" id="nav-guest-favs" title="{{ t('nav.favs') }}" class="desktop-only"><i class="fa-solid fa-heart"></i></a>
    @endif
    <button class="navbar-toggler" type="button" id="nav-toggler"
      onclick="document.getElementById('navbarContent').classList.toggle('show'); this.classList.toggle('is-open')">
      <span></span><span></span><span></span>
    </button>
  </div>

  <div class="motd-container" id="motd-container" @if(typeof motd==='undefined' || motd==='' ) style="display:none" @endif>
    <span class="motd-content" id="motd-display"></span>
    <div id="motd-data" style="display:none">@if(typeof motd !== 'undefined'){!! motd !!}@endif</div>
  </div>

</nav>
@endif
@endif



<script>
// Passkey login for registered users — fires only on explicit button click
async function loginWithPasskey() {
  const btn = document.getElementById('modal-login-passkey-btn');
  const errEl = document.getElementById('modal-passkey-error');
  if (errEl) errEl.style.display = 'none';
  if (!window.PublicKeyCredential) {
    if (errEl) { errEl.style.display = ''; errEl.textContent = 'Passkeys are not supported in this browser.'; }
    return;
  }
  if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Waiting for passkey...'; }

  function b64urlToArr(s) { return Uint8Array.from(atob(s.split('-').join('+').split('_').join('/')), c=>c.charCodeAt(0)); }
  function arrToB64url(buf) { return btoa(String.fromCharCode(...new Uint8Array(buf))).split('+').join('-').split('/').join('_').replace(/=+$/,''); }

  try {
    const beginRes = await fetch('/api/v2/settings/passkeys/login/begin', { method: 'POST', headers: {'Content-Type':'application/json'}, body: '{}' });
    const beginData = await beginRes.json();
    if (!beginData.success) throw new Error(beginData.msg || 'Server error');

    const opts = beginData.options;
    const cred = await navigator.credentials.get({ publicKey: {
      challenge: b64urlToArr(opts.challenge),
      rpId: opts.rpId,
      allowCredentials: (opts.allowCredentials || []).map(c => ({ type: c.type, id: b64urlToArr(c.id) })),
      userVerification: opts.userVerification || 'preferred',
      timeout: opts.timeout || 60000
    }});

    const finishRes = await fetch('/api/v2/settings/passkeys/login/finish', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        challenge: opts.challenge,
        credentialId: arrToB64url(cred.rawId),
        clientDataJSON: arrToB64url(cred.response.clientDataJSON),
        authenticatorData: arrToB64url(cred.response.authenticatorData),
        signature: arrToB64url(cred.response.signature)
      })
    });
    const finishData = await finishRes.json();
    if (!finishData.success) throw new Error(finishData.msg || 'Authentication failed');

    window.location.reload();
  } catch (e) {
    console.warn('[PASSKEY] Login failed:', e);
    if (errEl) {
      errEl.style.display = '';
      if (e && e.name === 'NotAllowedError') {
        errEl.textContent = 'Passkey request was cancelled or blocked. If Bitwarden or another password manager is locked, please unlock it or check extension permissions.';
      } else {
        errEl.textContent = (e && e.message) || 'Passkey login failed.';
      }
    }
    if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fa-solid fa-fingerprint"></i> Use my passkey'; }
  }
}
</script>

<div id="login-modal" style="display: none;">
  <div class="login-modal-content">
    <button id="login-modal-close">&times;</button>
    
    <!-- Login View -->
    <div id="modal-login-view">
      <div class="lm-header">
        <h2 class="lm-title">{{ t('auth.login_title') }}</h2>
        <div class="lm-subtitle">{{ domain }}</div>
      </div>

      <!-- Tab bar -->
      <div id="login-tabs" class="lm-tabs" role="tablist">
        <button type="button" id="login-tab-creds" class="lm-tab is-active" role="tab" aria-selected="true" onclick="switchLoginTab('creds')">
          <i class="fa-solid fa-key"></i>Credentials
        </button>
        <button type="button" id="login-tab-passkey" class="lm-tab" role="tab" aria-selected="false" onclick="switchLoginTab('passkey')">
          <i class="fa-solid fa-fingerprint"></i>Passkey
        </button>
      </div>

      <!-- Tab: Credentials -->
      <div id="login-panel-creds" class="lm-panel">
        <form class="login-form lm-form" method="post" action="/login" novalidate>
          <label class="lm-field">
            <i class="fa-solid fa-user lm-field-icon"></i>
            <input class="lm-input" type="text" name="username" placeholder="{{ t('auth.username_or_email') }}" aria-label="{{ t('auth.username_or_email') }}" autocomplete="username" autocapitalize="off" spellcheck="false" required />
          </label>
          <label class="lm-field">
            <i class="fa-solid fa-lock lm-field-icon"></i>
            <input class="lm-input" type="password" name="password" id="modal-login-password" placeholder="{{ t('auth.password_placeholder_min') }}" aria-label="{{ t('auth.password_placeholder_min') }}" autocomplete="current-password" required />
            <button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
              <i class="fa-solid fa-eye"></i>
            </button>
          </label>

          <div class="lm-row">
            <label class="lm-check" for="kmsi-modal">
              <input type="checkbox" id="kmsi-modal" name="kmsi" />
              <span class="lm-check-box"><i class="fa-solid fa-check"></i></span>
              <span>{{ t('auth.stay_signed_in') }}</span>
            </label>
            @if(smtp_enabled)
            <a href="#" id="modal-forgot-btn" class="lm-link lm-link-muted">{{ t('auth.forgot_password') }}</a>
            @endif
          </div>

          <button type="submit" class="lm-btn lm-btn-primary">
            {{ t('auth.login_title') }} <i class="fa-solid fa-arrow-right"></i>
          </button>
        </form>
      </div>

      <!-- Tab: Passkey -->
      <div id="login-panel-passkey" class="lm-panel lm-panel-passkey" style="display: none;">
        <button type="button" id="modal-login-passkey-btn" class="lm-btn lm-btn-primary" onclick="loginWithPasskey()">
          <i class="fa-solid fa-fingerprint"></i> Use my passkey
        </button>
        <div id="modal-passkey-error" class="lm-error" style="display:none;"></div>
      </div>

      @if(enable_anonymous_access)
      <div class="lm-anon">
        <div class="lm-divider"><span>or</span></div>
        <button type="button" id="modal-login-as-anon-btn" class="lm-btn lm-btn-ghost"
          onclick="event.preventDefault(); if(window.f0ckAnonPasskey) window.f0ckAnonPasskey.openSetupModal(); else { const m=document.getElementById('anon-setup-modal'); if(m) m.style.display='flex'; }">
          <i class="fa-solid fa-user-secret"></i> Login as Anonymous
        </button>
        @if(registration_open)
        <button type="button" id="modal-login-register-btn" class="lm-btn lm-btn-ghost" style="margin-top: 8px;">
          <i class="fa-solid fa-user-plus"></i> Register
        </button>
        @endif
      </div>
      @endif

      @if(registration_open || private_society)
      <p class="lm-footer">
        {{ t('auth.no_account') }} <a href="#" id="login-to-register" class="lm-link">{{ t('auth.register_now') }}</a>
      </p>
      @endif
    </div>

    <style>
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) {
      --lm-accent: var(--accent, #0096ff);
      --lm-text: var(--text-color, #fff);
      --lm-muted: var(--text-muted, #8a8f98);
      --lm-surface: rgba(255, 255, 255, 0.04);
      --lm-border: rgba(255, 255, 255, 0.1);
      --lm-radius: 0;
      padding: 28px 28px 24px;
      font-family: inherit;
      color: var(--lm-text);
    }
    #login-modal .login-modal-content,
    #register-modal .login-modal-content { border-radius: 0; }

    /* Header */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-header { text-align: center; margin-bottom: 22px; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-title {
      margin: 0; font-size: 1.5em; font-weight: 700; letter-spacing: -0.01em; color: var(--lm-text);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-subtitle {
      margin-top: 4px; font-size: 0.82em; color: var(--lm-muted); letter-spacing: 0.02em;
    }

    /* Segmented tabs */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tabs {
      display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid var(--lm-border);
      border-radius: var(--lm-radius);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab {
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 8px 0; margin: 0;
      background: transparent; border: 0; border-radius: var(--lm-radius);
      color: var(--lm-muted); font: inherit; font-size: 0.88em; font-weight: 600;
      cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab:hover { color: var(--lm-text); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab.is-active {
      color: var(--lm-text);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-tab.is-active i { color: var(--lm-accent); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-panel { animation: lm-fade 0.2s ease; }
    @keyframes lm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    /* Form */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) form.lm-form {
      display: flex; flex-direction: column; gap: 12px;
      padding: 0; margin: 0; background: none; border: 0; box-shadow: none; width: 100%;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field { position: relative; display: block; margin: 0; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--lm-muted); font-size: 0.9em; pointer-events: none; transition: color 0.15s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input {
      width: 100%; box-sizing: border-box; height: 46px; margin: 0;
      padding: 0 42px 0 40px;
      background: var(--lm-surface);
      border: 1px solid var(--lm-border);
      border-radius: var(--lm-radius);
      color: var(--lm-text); font: inherit; font-size: 0.95em;
      outline: none; box-shadow: none;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input::placeholder { color: var(--lm-muted); opacity: 0.8; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input:hover { border-color: rgba(255, 255, 255, 0.18); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) input.lm-input:focus {
      border-color: var(--lm-accent);
      background: rgba(255, 255, 255, 0.06);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 22%, transparent);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-field:focus-within .lm-field-icon { color: var(--lm-accent); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-reveal {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      width: 34px; height: 34px; margin: 0; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: transparent; border: 0; border-radius: var(--lm-radius);
      color: var(--lm-muted); cursor: pointer; transition: color 0.15s, background 0.15s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-reveal:hover { color: var(--lm-text); background: rgba(255, 255, 255, 0.06); }

    /* Remember me + forgot */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      font-size: 0.85em; margin: 2px 0 4px;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check {
      display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--lm-muted); user-select: none;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check-box {
      width: 18px; height: 18px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--lm-radius);
      background: var(--lm-surface); font-size: 0.7em; color: transparent;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check:hover .lm-check-box { border-color: var(--lm-accent); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:checked + .lm-check-box { background: var(--lm-accent); border-color: var(--lm-accent); color: #000; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:focus-visible + .lm-check-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 30%, transparent); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-check input:checked ~ span:last-child { color: var(--lm-text); }

    /* Links */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link {
      color: var(--lm-accent); text-decoration: none; font-weight: 600; transition: opacity 0.15s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link-muted { color: var(--lm-muted); font-weight: 500; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-link-muted:hover { color: var(--lm-text); }

    /* Buttons */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn {
      width: 100%; height: 46px; margin: 0; padding: 0 16px;
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      border-radius: var(--lm-radius); font: inherit; font-size: 0.95em; font-weight: 700;
      cursor: pointer; transition: transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s, filter 0.18s;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary {
      margin-top: 6px;
      border: 1px solid var(--lm-accent); color: #000;
      background: var(--lm-accent);
      box-shadow: none;
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:hover { background: transparent; color: var(--lm-accent); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:active { transform: translateY(1px); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary .fa-arrow-right { font-size: 0.85em; transition: transform 0.18s; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-primary:hover .fa-arrow-right { transform: translateX(3px); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn:disabled { opacity: 0.6; cursor: progress; filter: none; transform: none; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 2px; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-ghost {
      background: var(--lm-surface); border: 1px solid var(--lm-border); color: var(--lm-muted); font-weight: 600;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-btn-ghost:hover { color: var(--lm-text); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); }

    /* Passkey panel */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-panel-passkey { text-align: center; padding-top: 4px; }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-passkey-icon {
      width: 76px; height: 76px; margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--lm-radius); font-size: 2.2em; color: var(--lm-accent);
      background: radial-gradient(circle, color-mix(in srgb, var(--lm-accent) 20%, transparent) 0%, transparent 70%);
      border: 1px solid color-mix(in srgb, var(--lm-accent) 30%, transparent);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-passkey-text {
      margin: 0 auto 20px; max-width: 320px; font-size: 0.88em; line-height: 1.6; color: var(--lm-muted);
    }

    /* Errors (also covers the .flash-error the login JS injects) */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-error,
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .flash-error {
      margin: 10px 0 0; padding: 10px 12px; text-align: left;
      font-size: 0.84em; line-height: 1.45; color: #ff8a8a;
      background: rgba(224, 108, 117, 0.1);
      border: 1px solid rgba(224, 108, 117, 0.3);
      border-radius: var(--lm-radius);
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) form .flash-error { margin: 0; }
    #register-modal #modal-register-view #register-status:empty { display: none; }
    #register-modal #modal-register-view #register-status.flash-success {
      padding: 10px 12px; font-size: 0.84em; line-height: 1.45; color: #7ee2a0;
      background: rgba(74, 222, 128, 0.1);
      border: 1px solid rgba(74, 222, 128, 0.3);
      border-radius: var(--lm-radius);
    }

    /* Anon setup */
    #anon-setup-modal #anon-setup-view .lm-note {
      margin: 0 0 20px; padding: 9px 12px; text-align: left;
      font-size: 0.8em; line-height: 1.5; color: var(--lm-muted);
      background: var(--lm-surface); border: 1px solid var(--lm-border); border-left: 2px solid var(--lm-accent);
    }
    #anon-setup-modal #anon-setup-view .lm-note i { color: var(--lm-accent); margin-right: 4px; }
    #anon-setup-modal #anon-setup-view .lm-title { margin-bottom: 18px; }
    #anon-setup-modal #anon-setup-view .anon-consent { margin: 0 0 16px; text-align: left; }
    /* Disabled until the privacy consent is ticked (spinner state keeps the progress cursor) */
    #anon-setup-modal #anon-setup-view .lm-btn:disabled:not(:has(.fa-spinner)) { cursor: not-allowed; opacity: 0.45; }
    #anon-setup-modal #anon-setup-view .lm-textbtn {
      margin: 0; padding: 0; background: none; border: 0;
      font: inherit; font-weight: 600; color: var(--lm-accent); cursor: pointer;
    }
    #anon-setup-modal #anon-setup-view .lm-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Anon passkey identity */
    #anon-passkey-modal #anon-passkey-view .lm-stat {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin: 0 0 16px; padding: 12px 14px;
      background: var(--lm-surface); border: 1px solid var(--lm-border);
    }
    #anon-passkey-modal #anon-passkey-view .lm-stat-label {
      font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lm-muted);
    }
    #anon-passkey-modal #anon-passkey-view .lm-stat code { color: var(--lm-accent); font-size: 0.95em; }

    /* Register-only */
    #register-modal #modal-register-view .lm-check-multiline { align-items: flex-start; line-height: 1.5; }
    #register-modal #modal-register-view .lm-check-multiline .lm-check-box { margin-top: 1px; }
    #register-modal #modal-register-view .lm-recaptcha { display: flex; justify-content: center; }

    /* Divider + footer */
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider {
      display: flex; align-items: center; gap: 12px; margin: 20px 0 14px;
      color: var(--lm-muted); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.12em;
    }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider::before,
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-divider::after { content: ''; flex: 1; height: 1px; background: var(--lm-border); }
    :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) .lm-footer {
      margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--lm-border);
      text-align: center; font-size: 0.88em; color: var(--lm-muted);
    }

    @media (prefers-reduced-motion: reduce) {
      :is(#login-modal #modal-login-view, #register-modal #modal-register-view, #anon-setup-modal #anon-setup-view, #anon-passkey-modal #anon-passkey-view) * { animation: none !important; transition: none !important; }
    }
    </style>

    <script>
    function switchLoginTab(tab) {
      var isCreds = tab === 'creds';
      document.getElementById('login-panel-creds').style.display = isCreds ? '' : 'none';
      document.getElementById('login-panel-passkey').style.display = isCreds ? 'none' : '';
      [['login-tab-creds', isCreds], ['login-tab-passkey', !isCreds]].forEach(function (t) {
        var el = document.getElementById(t[0]);
        if (!el) return;
        el.classList.toggle('is-active', t[1]);
        el.setAttribute('aria-selected', t[1] ? 'true' : 'false');
      });
    }
    function toggleLoginPassword(btn) {
      var input = btn.parentNode.querySelector('input');
      if (!input) return;
      var show = input.type === 'password';
      input.type = show ? 'text' : 'password';
      btn.innerHTML = show ? '<i class="fa-solid fa-eye-slash"></i>' : '<i class="fa-solid fa-eye"></i>';
      btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
      btn.title = show ? 'Hide password' : 'Show password';
      input.focus();
    }
    </script>



    @if(smtp_enabled)
    <!-- Forgot Password View -->
    <div id="modal-forgot-view" style="display: none;">
      <form class="login-form" id="forgot-password-form" novalidate>
        <h2 style="text-align: center; margin-bottom: 20px;">{{ t('auth.forgot_title') }}</h2>
        <p style="text-align: center; margin-bottom: 20px; font-size: 0.9em; color: #ccc;">{{ t('auth.forgot_desc') }}</p>
        <input type="email" id="forgot-email" placeholder="{{ t('auth.email_address') }}" required />
        <div id="forgot-status" style="margin-bottom: 15px; text-align: center; font-size: 0.9em;"></div>
        <button type="submit">{{ t('auth.send_reset') }}</button>
        <div style="text-align: center; margin-top: 20px;">
          <a href="#" id="forgot-to-login" style="font-size: 0.9em; color: var(--accent); text-decoration: underline;">{{ t('auth.back_to_login') }}</a>
        </div>
      </form>
    </div>
    @endif

    <!-- Reset Password View -->
    <div id="modal-reset-view" style="display: none;">
      <form class="login-form" id="reset-password-form" novalidate>
        <h2 style="text-align: center; margin-bottom: 20px;">{{ t('auth.reset_title') }}</h2>
        <p style="text-align: center; margin-bottom: 20px; font-size: 0.9em; color: #ccc;">{{ t('auth.reset_desc') }}</p>
        <input type="hidden" id="reset-token" />
        <input type="password" id="reset-password" placeholder="{{ t('auth.new_password_min') }}" required minlength="20" autocomplete="new-password" />
        <input type="password" id="reset-password-confirm" placeholder="{{ t('auth.confirm_new_password') }}" required minlength="20" autocomplete="new-password" />
        <div id="reset-status" style="margin-bottom: 15px; text-align: center; font-size: 0.9em;"></div>
        <button type="submit">{{ t('auth.update_password') }}</button>
        <div style="text-align: center; margin-top: 20px;">
          <a href="#" id="reset-to-login" style="font-size: 0.9em; color: var(--accent); text-decoration: underline; display: none;">{{ t('auth.back_to_login') }}</a>
        </div>
      </form>
    </div>
  </div>
</div>

@if(enable_anonymous_access)
<!-- Anonymous Passkey Identity Modal -->
<div id="anon-passkey-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 99999; align-items: center; justify-content: center;">
  <div style="max-width: 380px; width: 92vw; max-height: 90vh; overflow-y: auto; padding: 0; border: 1px solid var(--accent); border-radius: 0; background: var(--bg); box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative;">
    <button id="anon-passkey-modal-close" style="position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.3em; cursor: pointer; line-height: 1;">&times;</button>

    <div id="anon-passkey-view">
      <div class="lm-header">
        <h2 class="lm-title">Passkeys</h2>
        <div class="lm-subtitle"><span id="anon-pk-count">–</span> / <span id="anon-pk-max">4</span> in use</div>
      </div>

      <div class="lm-stat">
        <span class="lm-stat-label">Fingerprint</span>
        <code id="anon-pk-fp-display">—</code>
      </div>

      <button type="button" id="anon-pk-add-btn" class="lm-btn lm-btn-primary">
        <i class="fa-solid fa-plus"></i> Add passkey
      </button>
      <div id="anon-pk-error" class="lm-error" style="display: none;"></div>
    </div>
  </div>
</div>

<script>
(function(){
  // Keep legacy modal ID working for any nav onclick handlers that reference anon-ssh-modal
  var legacyAlias = document.getElementById('anon-ssh-modal');
  if (!legacyAlias) {
    // Create a minimal alias element that delegates to the passkey modal
    var alias = document.createElement('div');
    alias.id = 'anon-ssh-modal';
    alias.style.display = 'none';
    Object.defineProperty(alias.style, 'display', {
      set: function(v) { if (v === 'flex' || v === 'block') { var m = document.getElementById('anon-passkey-modal'); if (m) m.style.display = 'flex'; } }
    });
    document.body.appendChild(alias);
  }

  var modalClose = document.getElementById('anon-passkey-modal-close');
  if (modalClose) {
    modalClose.addEventListener('click', function() {
      var m = document.getElementById('anon-passkey-modal');
      if (m) m.style.display = 'none';
    });
  }
  var overlay = document.getElementById('anon-passkey-modal');
  if (overlay) {
    overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.style.display = 'none'; });
  }
})();
</script>
@endif

@if(enable_anonymous_access)
<!-- Anonymous Passkey Setup Modal — shown when user clicks "Login as anonymous" -->
<div id="anon-setup-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 99999; align-items: center; justify-content: center;">
  <div style="max-width: 420px; width: 92vw; padding: 0; border: 1px solid var(--accent); border-radius: 0; background: var(--bg); box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative;">
    <button id="anon-setup-modal-close" style="position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.3em; cursor: pointer; line-height: 1;">&times;</button>

    <div id="anon-setup-view">
      <!-- New user view (no passkey yet) -->
      <div id="anon-setup-new" class="lm-panel lm-panel-passkey">
        <h2 class="lm-title">Create passkey</h2>
        <div class="lm-row anon-consent">
          <label class="lm-check lm-check-multiline" for="anon-consent-new">
            <input type="checkbox" id="anon-consent-new" class="anon-consent-input" />
            <span class="lm-check-box"><i class="fa-solid fa-check"></i></span>
            <span>I have read the <a href="/privacy" class="lm-link anon-consent-open">privacy page</a> and accept how my data is processed.</span>
          </label>
        </div>
        <button type="button" id="anon-setup-create-btn" class="lm-btn lm-btn-primary">
          <i class="fa-solid fa-fingerprint"></i> Create
        </button>
        <div id="anon-setup-new-error" class="lm-error" style="display: none;"></div>
        <p class="lm-footer">
          <button type="button" id="anon-setup-switch-existing" class="lm-textbtn">Already have one? Use existing passkey</button>
        </p>
      </div>

      <!-- Returning user view (has passkey) -->
      <div id="anon-setup-returning" class="lm-panel lm-panel-passkey" style="display: none;">
        <h2 class="lm-title">Authenticate with passkey</h2>
        <button type="button" id="anon-setup-auth-btn" class="lm-btn lm-btn-primary">
          <i class="fa-solid fa-fingerprint"></i> Authenticate
        </button>
        <div id="anon-setup-ret-error" class="lm-error" style="display: none;"></div>
        <p class="lm-footer">
          <button type="button" id="anon-setup-switch-new" class="lm-textbtn">Create a new passkey instead</button>
        </p>
      </div>
    </div>
  </div>
</div>
<!-- Privacy consent modal: opened from the "Create passkey" consent checkbox; must be read to the end -->
<div id="privacy-consent-modal" style="display: none;">
  <div class="pc-content">
    <div class="pc-header">
      <h3><i class="fa-solid fa-shield-halved"></i> Privacy</h3>
      <button type="button" id="privacy-consent-close" class="pc-close" aria-label="Close">&times;</button>
    </div>
    <div class="pc-body" id="privacy-consent-body"></div>
    <div class="pc-footer">
      <span class="pc-hint" id="privacy-consent-hint">Scroll to the end to accept.</span>
      <button type="button" id="privacy-consent-accept" class="pc-accept" disabled><i class="fa-solid fa-check"></i> Accept</button>
    </div>
  </div>
</div>
<style>
  #privacy-consent-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px);
  }
  #privacy-consent-modal .pc-content {
    width: 100vw; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg); border: 0; border-radius: 0;
  }
  #privacy-consent-modal .pc-header {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid var(--accent);
  }
  #privacy-consent-modal .pc-header h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.1em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
  #privacy-consent-modal .pc-header h3 i { color: var(--accent); }
  #privacy-consent-modal .pc-close {
    width: 36px; height: 36px; margin: 0; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0;
    color: var(--text-color, #fff); font-size: 1.6em; line-height: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s;
  }
  #privacy-consent-modal .pc-close:hover { color: var(--accent); border-color: var(--accent); }
  #privacy-consent-modal .pc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #privacy-consent-modal .pc-body .pv { padding-top: 20px; }
  #privacy-consent-modal .pc-loading { padding: 40px 20px; text-align: center; color: var(--text-muted, #aaa); }
  #privacy-consent-modal .pc-footer {
    flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2);
  }
  #privacy-consent-modal .pc-hint { font-size: 0.85em; color: var(--text-muted, #aaa); }
  #privacy-consent-modal .pc-accept {
    height: 42px; padding: 0 22px; margin: 0; font: inherit; font-size: 0.85em; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 0;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #000; border: 1px solid var(--accent); transition: background 0.18s, color 0.18s;
  }
  #privacy-consent-modal .pc-accept:hover:not(:disabled) { background: transparent; color: var(--accent); }
  #privacy-consent-modal .pc-accept:disabled { opacity: 0.4; cursor: not-allowed; }
  @media (max-width: 600px) {
    #privacy-consent-modal .pc-footer { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
    #privacy-consent-modal .pc-accept { justify-content: center; }
  }
</style>
<script>
(function() {
  function closeSetupModal() {
    var m = document.getElementById('anon-setup-modal'); if (m) m.style.display = 'none';
  }
  var closeBtn = document.getElementById('anon-setup-modal-close');
  if (closeBtn) closeBtn.addEventListener('click', closeSetupModal);
  var overlay = document.getElementById('anon-setup-modal');
  if (overlay) overlay.addEventListener('click', function(e) { if (e.target === overlay) closeSetupModal(); });
  var switchToExisting = document.getElementById('anon-setup-switch-existing');
  var switchToNew = document.getElementById('anon-setup-switch-new');
  if (switchToExisting) switchToExisting.addEventListener('click', function() {
    document.getElementById('anon-setup-new').style.display = 'none';
    document.getElementById('anon-setup-returning').style.display = '';
  });
  if (switchToNew) switchToNew.addEventListener('click', function() {
    document.getElementById('anon-setup-returning').style.display = 'none';
    document.getElementById('anon-setup-new').style.display = '';
  });
  // Privacy consent (new passkeys only): the checkbox can only be ticked by reading the privacy page in
  // the consent modal to the end. Accepting is remembered in localStorage and the checkbox never shows again.
  var CONSENT_KEY = 'f0ck_privacy_accepted';
  var consentInput = document.getElementById('anon-consent-new');
  var hasConsent = function() {
    try { return !!localStorage.getItem(CONSENT_KEY); } catch (e) { return false; }
  };
  var syncConsent = function() {
    var accepted = hasConsent();
    document.querySelectorAll('#anon-setup-modal .anon-consent').forEach(function(el) { el.style.display = accepted ? 'none' : ''; });
    var btn = document.getElementById('anon-setup-create-btn');
    if (btn && !btn.querySelector('.fa-spinner')) btn.disabled = !(accepted || (consentInput && consentInput.checked));
  };
  var recordConsent = function() {
    if (hasConsent()) return true;
    if (!consentInput || !consentInput.checked) return false;
    try { localStorage.setItem(CONSENT_KEY, JSON.stringify({ accepted_at: new Date().toISOString() })); } catch (e) {}
    return true;
  };

  var pcModal = document.getElementById('privacy-consent-modal');
  var pcBody = document.getElementById('privacy-consent-body');
  var pcAccept = document.getElementById('privacy-consent-accept');
  var pcHint = document.getElementById('privacy-consent-hint');
  var pcLoaded = false;
  var pcCheckEnd = function() {
    if (!pcLoaded) return;
    var atEnd = pcBody.scrollTop + pcBody.clientHeight >= pcBody.scrollHeight - 8;
    if (atEnd) {
      pcAccept.disabled = false;
      if (pcHint) pcHint.textContent = 'You reached the end.';
    }
  };
  var loadPrivacy = async function() {
    if (pcLoaded) return;
    pcBody.innerHTML = '<div class="pc-loading"><i class="fa-solid fa-spinner fa-spin"></i> Loading…</div>';
    try {
      var r = await fetch('/privacy', { credentials: 'same-origin' });
      var doc = new DOMParser().parseFromString(await r.text(), 'text/html');
      var pv = doc.querySelector('#main .pv');
      if (!r.ok || !pv) throw new Error('bad response');
      pcBody.innerHTML = '';
      doc.querySelectorAll('#main style').forEach(function(st) { pcBody.appendChild(st.cloneNode(true)); });
      pcBody.appendChild(document.importNode(pv, true));
      pcBody.querySelectorAll('a[href]').forEach(function(a) { a.target = '_blank'; a.rel = 'noopener'; });
    } catch (e) {
      pcBody.innerHTML = '<div class="pc-loading">Could not load the privacy page. <a href="/privacy" target="_blank" class="lm-link">Open it in a new tab</a>.</div>';
    }
    pcLoaded = true;
  };
  var openConsentModal = async function() {
    if (!pcModal) return;
    pcAccept.disabled = true;
    if (pcHint) pcHint.textContent = 'Scroll to the end to accept.';
    pcModal.style.display = 'flex';
    await loadPrivacy();
    pcBody.scrollTop = 0;
    // Short content that doesn't scroll counts as read
    requestAnimationFrame(pcCheckEnd);
  };
  var closeConsentModal = function() { if (pcModal) pcModal.style.display = 'none'; };
  if (pcBody) pcBody.addEventListener('scroll', pcCheckEnd, { passive: true });
  if (pcAccept) pcAccept.addEventListener('click', function() {
    if (consentInput) consentInput.checked = true;
    closeConsentModal();
    syncConsent();
  });
  var pcClose = document.getElementById('privacy-consent-close');
  if (pcClose) pcClose.addEventListener('click', closeConsentModal);

  if (consentInput) consentInput.addEventListener('click', function(e) {
    // Ticking goes through the privacy modal; unticking is always allowed
    if (!consentInput.checked) return syncConsent();
    e.preventDefault();
    openConsentModal();
  });
  document.querySelectorAll('#anon-setup-modal .anon-consent-open').forEach(function(a) {
    a.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); openConsentModal(); });
  });

  syncConsent();
  // Re-sync whenever the modal is opened (another tab may have accepted meanwhile)
  if (overlay) new MutationObserver(function() { if (overlay.style.display !== 'none') syncConsent(); }).observe(overlay, { attributes: true, attributeFilter: ['style'] });

  var createBtn = document.getElementById('anon-setup-create-btn');
  if (createBtn) createBtn.addEventListener('click', async function() {
    var errEl = document.getElementById('anon-setup-new-error');
    if (errEl) errEl.style.display = 'none';
    if (!recordConsent()) return;
    createBtn.disabled = true;
    createBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving passkey...';
    try {
      await window.f0ckAnonPasskey.doRegister();
    } catch(e) {
      console.warn('[ANON_PASSKEY] Registration failed:', e);
      if (errEl) {
        errEl.style.display = '';
        if (e && e.name === 'NotAllowedError') {
          errEl.textContent = 'Passkey creation was cancelled or blocked. If Bitwarden or another password manager is locked, please unlock it or disable passkey interception.';
        } else {
          errEl.textContent = (e && e.message) || 'Something went wrong.';
        }
      }
      createBtn.disabled = false;
      createBtn.innerHTML = '<i class="fa-solid fa-fingerprint"></i> Create';
    }
  });
  var authBtn = document.getElementById('anon-setup-auth-btn');
  if (authBtn) authBtn.addEventListener('click', async function() {
    var errEl = document.getElementById('anon-setup-ret-error');
    if (errEl) errEl.style.display = 'none';
    authBtn.disabled = true;
    authBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Waiting for passkey...';
    try {
      await window.f0ckAnonPasskey.doAuthenticate();
    } catch(e) {
      console.warn('[ANON_PASSKEY] Authentication failed:', e);
      if (errEl) {
        errEl.style.display = '';
        if (e && e.name === 'NotAllowedError') {
          errEl.textContent = 'Passkey request was cancelled or blocked. If Bitwarden or another password manager is locked, please unlock it.';
        } else {
          errEl.textContent = (e && e.message) || 'Authentication failed.';
        }
      }
      authBtn.disabled = false;
      authBtn.innerHTML = '<i class="fa-solid fa-fingerprint"></i> Authenticate';
    }
  });
})();
</script>
@endif

@if(!private_society || session)
<!-- Shortcuts Modal -->
<div id="shortcuts-modal" style="display: none;">
  <div class="login-modal-content sc-content">
    <div class="sc-header">
      <h2><i class="fa-solid fa-keyboard"></i> {{ t('shortcuts.title') }}</h2>
      <button type="button" id="shortcuts-modal-close" aria-label="Close">&times;</button>
    </div>
    <div class="shortcuts-content sc-body">
      <div class="shortcut-list">
        <div class="shortcut-item"><span><kbd>k</kbd></span><span>{{ t('shortcuts.search') }}</span></div>
        <div class="shortcut-item"><span><kbd>m</kbd></span><span>{{ t('shortcuts.main_page') }}</span></div>
        <div class="shortcut-item"><span><kbd>r</kbd></span><span>{{ t('shortcuts.random') }}</span></div>
        <div class="shortcut-item"><span><kbd>z</kbd></span><span>{{ t('shortcuts.shuffle') }}</span></div>
        <div class="shortcut-item"><span><kbd>u</kbd></span><span>{{ t('shortcuts.quick_upload') }}</span></div>
        <div class="shortcut-item"><span><kbd>c</kbd></span><span>{{ t('shortcuts.toggle_comments') }}</span></div>
        <div class="shortcut-item"><span><kbd>h</kbd></span><span>{{ t('shortcuts.toggle_sidebar') }}</span></div>
        <div class="shortcut-item"><span><kbd>Ctrl</kbd> + <kbd>&#46;</kbd></span><span>{{ t('shortcuts.focus_comment') }}</span></div>
        <div class="shortcut-item"><span><kbd>Ctrl</kbd> + <kbd>Enter</kbd></span><span>{{ t('shortcuts.send_comment') }}</span></div>
        <div class="shortcut-item"><span><kbd>s</kbd></span><span>{{ t('shortcuts.flash_yank') }}</span></div>
        @if(session)
        <div class="shortcut-item"><span><kbd>Shift</kbd> + <kbd>S</kbd></span><span>{{ t('shortcuts.open_settings') }}</span></div>
        @endif
        @if(session)
        <div class="shortcut-item"><span><kbd>e</kbd></span><span>{{ t('shortcuts.tag_exclude') }}</span></div>
        <div class="shortcut-item"><span><kbd>i</kbd></span><span>{{ t('shortcuts.tag_input') }}</span></div>
        @endif
        <div class="shortcut-item"><span><kbd>l</kbd></span><span>{{ t('shortcuts.toggle_bg') }}</span></div>
        <div class="shortcut-item"><span><kbd id="shortcut-theme">t</kbd></span><span>{{ t('shortcuts.cycle_themes') }}</span></div>
        @if(session && session.admin)
        <div class="shortcut-item"><span><kbd>x</kbd></span><span>{{ t('shortcuts.delete') }}</span></div>
        <div class="shortcut-item"><span><kbd>p</kbd></span><span>{{ t('shortcuts.toggle_rating') }}</span></div>
        <div class="shortcut-item"><span><kbd>^</kbd> / <kbd>~</kbd></span><span>Toggle Admin Bar</span></div>
        @endif
        <div class="shortcut-item"><span><kbd>Space</kbd></span><span>{{ t('shortcuts.play_pause') }}</span></div>
        <div class="shortcut-item"><span><kbd>←</kbd> <kbd>→</kbd></span><span>{{ t('shortcuts.next_prev') }}</span></div>
        <div class="shortcut-item"><span><kbd>↑</kbd> <kbd>↓</kbd></span><span>{{ t('shortcuts.volume') }}</span></div>
        <div class="shortcut-item"><span><kbd>Scroll</kbd></span><span>{{ t('shortcuts.scroll_nav') }}</span></div>
        <div class="shortcut-item"><span><kbd>Shift</kbd> + <kbd>Scroll</kbd></span><span>{{ t('shortcuts.next_prev') }}</span></div>
        <div class="shortcut-item"><span><kbd>,</kbd> <kbd>.</kbd></span><span>{{ t('shortcuts.frame_skip') }}</span></div>
        <div class="shortcut-item"><span><kbd>?</kbd></span><span>{{ t('shortcuts.show_help') }}</span></div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Keyboard shortcuts modal: style guide (square, flat, accent border), fixed header, only the list scrolls */
  #shortcuts-modal .sc-content {
    --sc-muted: var(--text-muted, #8a8f98);
    --sc-border: rgba(255, 255, 255, 0.1);
    width: min(520px, 92vw); max-width: none; max-height: min(90vh, 90dvh);
    display: flex; flex-direction: column; overflow: hidden;
    margin: 0; padding: 0; text-align: left;
    background: var(--bg) !important; border: 1px solid var(--accent) !important;
    border-radius: 0 !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
  }
  #shortcuts-modal .sc-content * { border-radius: 0 !important; }
  #shortcuts-modal .sc-header {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--sc-border);
  }
  #shortcuts-modal .sc-header h2 {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 1.05em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  }
  #shortcuts-modal .sc-header h2 i { color: var(--accent); }
  #shortcuts-modal #shortcuts-modal-close {
    position: static; width: 36px; height: 36px; margin: 0; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--text-color, #fff);
    font-size: 1.6em; line-height: 1; opacity: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s;
  }
  #shortcuts-modal #shortcuts-modal-close:hover { color: var(--accent); border-color: var(--accent); }
  #shortcuts-modal .sc-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 20px 16px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
  }
  #shortcuts-modal .shortcut-list { gap: 0; margin: 0; }
  #shortcuts-modal .shortcut-item {
    align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--sc-border);
  }
  #shortcuts-modal .shortcut-item:last-child { border-bottom: 0; }
  #shortcuts-modal .shortcut-item span:last-child { color: var(--sc-muted); opacity: 1; }
  #shortcuts-modal .shortcut-item kbd {
    display: inline-block; min-width: 22px; padding: 2px 7px; text-align: center;
    font-size: 0.85em; font-family: inherit; font-weight: 700;
    background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: none;
  }
  @media (max-width: 600px) {
    #shortcuts-modal { padding: 0 !important; align-items: stretch !important; }
    #shortcuts-modal .sc-content {
      width: 100vw; height: 100vh; height: 100dvh; max-height: none;
      border: 0 !important; box-shadow: none !important;
    }
    #shortcuts-modal .sc-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  }
</style>
<div id="flash-container"></div>
@endif

<!-- Register Modal -->
<div id="register-modal" style="display: none;">
  <div class="login-modal-content">
    <button id="register-modal-close">&times;</button>
    <div id="modal-register-view">
      <div class="lm-header">
        <h2 class="lm-title">{{ t('auth.register_title') }}</h2>
        <div class="lm-subtitle">{{ domain }}</div>
      </div>

      <form class="login-form lm-form" id="modal-register-form" method="post" action="/register" novalidate>
        <div id="register-status"></div>
        <label class="lm-field">
          <i class="fa-solid fa-user lm-field-icon"></i>
          <input class="lm-input" type="text" name="username" placeholder="{{ t('auth.username_placeholder') }}" aria-label="{{ t('auth.username_placeholder') }}" autocomplete="username" autocapitalize="off" spellcheck="false" required />
        </label>
        <label class="lm-field">
          <i class="fa-solid fa-lock lm-field-icon"></i>
          <input class="lm-input" type="password" name="password" placeholder="{{ t('auth.password_placeholder') }}" aria-label="{{ t('auth.password_placeholder') }}" autocomplete="new-password" required minlength="20"
            title="Must be at least 20 characters long." />
          <button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
            <i class="fa-solid fa-eye"></i>
          </button>
        </label>
        <label class="lm-field">
          <i class="fa-solid fa-lock lm-field-icon"></i>
          <input class="lm-input" type="password" name="password_confirm" placeholder="{{ t('auth.confirm_password') }}" aria-label="{{ t('auth.confirm_password') }}" autocomplete="new-password" required minlength="20" />
          <button type="button" class="lm-reveal" onclick="toggleLoginPassword(this)" aria-label="Show password" title="Show password">
            <i class="fa-solid fa-eye"></i>
          </button>
        </label>
        @if(!registration_open)
        <label class="lm-field">
          <i class="fa-solid fa-ticket lm-field-icon"></i>
          <input class="lm-input" type="text" name="token" placeholder="{{ t('auth.invite_token') }}" aria-label="{{ t('auth.invite_token') }}" autocomplete="off" spellcheck="false" required />
        </label>
        @elseif(registration_require_mail_andor_token)
        <label class="lm-field">
          <i class="fa-solid fa-envelope lm-field-icon"></i>
          <input class="lm-input" type="email" name="email" placeholder="{{ t('auth.email_placeholder') }}" aria-label="{{ t('auth.email_placeholder') }}" autocomplete="email" required />
        </label>
        @endif
        <input type="text" name="email_confirm_field" style="display: none !important;" tabindex="-1" autocomplete="off" />

        <div class="lm-row">
          <label class="lm-check lm-check-multiline" for="tos-modal">
            <input type="checkbox" id="tos-modal" name="tos" required />
            <span class="lm-check-box"><i class="fa-solid fa-check"></i></span>
            <span>@if(private_society){{ t('auth.tos_private') }}@else{{ t('auth.tos_public') }} <a href="/terms" target="_blank" class="lm-link">{{ t('auth.tos_terms') }}</a>, <a href="/rules" target="_blank" class="lm-link">{{ t('auth.tos_rules') }}</a> {{ t('auth.tos_age') }}@endif</span>
          </label>
        </div>

        @if(recaptcha_enabled)
        <div id="modal-register-recaptcha" class="lm-recaptcha"></div>
        @endif

        <button type="submit" class="lm-btn lm-btn-primary">{{ t('auth.create_account') }}</button>
      </form>

      <p class="lm-footer">
        <a href="#" id="register-to-login" class="lm-link">{{ t('auth.back_to_login') }}</a>
      </p>
    </div>
  </div>
</div>

<!-- Global Drag & Drop Feature for Logged-in Users -->
@if(session)
<!-- Global Drop Overlay -->
<div id="drop-overlay">
  <div class="overlay-content">
    <i class="fa-solid fa-cloud-arrow-up" style="font-size: 5rem;"></i>
    <h2>{{ t('upload.drop_anywhere') }}</h2>
  </div>
</div>

<!-- Upload Drag Modal -->
<div id="upload-drag-modal">
  <div class="modal-content">
    <button class="modal-close" id="drag-modal-close" title="Cancel Upload">&times;</button>
    <div class="modal-body">
      <div class="upload-container" style="padding: 0; animation: none; opacity: 1;">
          <div class="upload-title">
          <span class="upload-title-text">{{ t('upload.title') }}</span>
          <div class="upload-limit-info">
              @if(session.uploads_remaining === undefined)
              <span class="limit-unlimited"><i class="fa-solid fa-infinity"></i> {{ t('upload.unlimited') }}</span>
              @elseif(session.uploads_remaining === 0)
              <span class="limit-exhausted"><i class="fa-solid fa-triangle-exclamation"></i> {{ t('upload.limit_reached') }} (0/{{ upload_limit }})</span>
              @else
              <span class="limit-remaining"><i class="fa-solid fa-upload"></i> {{ session.uploads_remaining }}/{{ upload_limit }} {{ t('upload.remaining') }}</span>
              @endif
          </div>
          </div>

          @include(snippets/upload-form)
      </div>
    </div>
  </div>
</div>

@endif

@if(recaptcha_enabled && (!session || session.is_anon))
<script>
(function() {
  var _rcModalWidgetId = null;
  var _rcLoaded = false;

  function renderModalRecaptcha() {
    var el = document.getElementById('modal-register-recaptcha');
    if (!el || !window.grecaptcha) return;
    if (_rcModalWidgetId !== null) {
      try { grecaptcha.reset(_rcModalWidgetId); } catch(e) {}
    } else {
      _rcModalWidgetId = grecaptcha.render(el, { sitekey: '{{ recaptcha_site_key }}', theme: 'dark' });
    }
  }

  window.onRecaptchaModalReady = function() {
    _rcLoaded = true;
    renderModalRecaptcha();
    if (typeof window.renderReportRecaptcha === 'function') window.renderReportRecaptcha();
  };

  document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('register-modal');
    if (!modal) return;
    var obs = new MutationObserver(function(mutations) {
      mutations.forEach(function(m) {
        if (m.attributeName === 'style') {
          if (modal.style.display !== 'none' && _rcLoaded) renderModalRecaptcha();
        }
      });
    });
    obs.observe(modal, { attributes: true });
  });
})();
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onRecaptchaModalReady&render=explicit" async defer></script>
@endif

@if(session && (session.admin || session._is_impersonating || session._preview_role))
<style>
/* ── Admin Bar ──────────────────────────────────────────────────────────────── */
.admin-bar {
  position: fixed;
  bottom: 0;
  left: var(--admin-bar-left, 0px);
  right: var(--admin-bar-right, 300px);
  width: auto;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.76rem;
  z-index: 100080 !important;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 190, 0, 0.28);
  border-bottom: none;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              left 0.3s ease-in-out,
              right 0.3s ease-in-out;
}

.admin-bar.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.onara-modal-open .admin-bar {
  z-index: 100080 !important;
  filter: none !important;
}

body.onara-modal-open .admin-bar.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Sidebar boundaries via CSS */
body.sidebar-right-hidden .admin-bar {
  right: 0 !important;
}

@media (max-width: 999px) {
  .admin-bar {
    right: min(280px, 80vw);
  }
  body.sidebar-right-hidden .admin-bar {
    right: 0 !important;
  }
}

body:not(:has(.global-sidebar-right, .item-sidebar-right, .index-sidebar-right)) .admin-bar {
  right: 0 !important;
}

@media (min-width: 1000px) {
  body.layout-modern:not(.sidebar-left-hidden):not(.comments-hidden):has(.item-sidebar-left) .admin-bar {
    left: min(350px, 30vw);
  }
  body.layout-modern.sidebar-left-hidden .admin-bar,
  body.layout-modern.comments-hidden .admin-bar,
  body:has(.item-layout-container.sidebar-hidden) .admin-bar {
    left: 0 !important;
  }
}

/* Lift bottom pagination smoothly if admin bar is open */
body.admin-bar-open .pagination-container-fluid {
  bottom: 32px;
}
.pagination-container-fluid {
  transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out !important;
}

.admin-bar-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 210, 80, 0.45);
  cursor: pointer;
  padding: 3px 7px;
  font-size: 0.8rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.admin-bar-close-btn:hover {
  color: #ffd844;
  background: rgba(255, 200, 0, 0.15);
}

/* Normal admin bar */
.admin-bar-inner {
  background: linear-gradient(90deg, #1a1200 0%, #1e1600 40%, #141000 100%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  overflow: hidden;
}

.admin-bar-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f5c400;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.9;
  white-space: nowrap;
  padding-right: 4px;
}
.admin-bar-brand i { font-size: 0.78rem; }

.admin-bar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.admin-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 210, 80, 0.75) !important;
  text-decoration: none !important;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.74rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  position: relative;
}
.admin-bar-link:hover {
  background: rgba(255, 200, 0, 0.12);
  color: #ffd844 !important;
}
.admin-bar-badge {
  background: #e05020;
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  display: inline-block;
}

.admin-bar-sep {
  flex: 1;
  height: 14px;
  border-left: 1px solid rgba(255, 200, 0, 0.12);
  margin: 0 4px;
  flex-basis: 0;
  min-width: 0;
}

/* View-as widget */
.admin-bar-viewas {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.admin-bar-viewas-input-wrap {
  position: relative;
}
.admin-bar-input {
  background: rgba(255, 200, 0, 0.07);
  border: 1px solid rgba(255, 200, 0, 0.2);
  border-radius: 4px;
  color: #ffd844;
  font-size: 0.73rem;
  font-family: var(--font, system-ui, sans-serif);
  padding: 2px 8px;
  width: 160px;
  outline: none;
  transition: border-color 0.15s, width 0.2s;
}
.admin-bar-input::placeholder { color: rgba(255,210,80,0.35); }
.admin-bar-input:focus {
  border-color: rgba(255, 200, 0, 0.55);
  width: 210px;
}
.admin-bar-viewas-btn {
  background: rgba(255, 200, 0, 0.12);
  border: 1px solid rgba(255, 200, 0, 0.3);
  border-radius: 4px;
  color: #ffd844;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 0.72rem;
  transition: background 0.15s, border-color 0.15s;
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-bar-viewas-btn:hover {
  background: rgba(255, 200, 0, 0.22);
  border-color: rgba(255, 200, 0, 0.55);
}
.admin-bar-viewas-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Autocomplete suggestions */
.admin-viewas-suggestions {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  background: #1a1600;
  border: 1px solid rgba(255, 200, 0, 0.3);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 100090 !important;
  display: none;
  overflow: hidden;
  min-width: 180px;
}
.admin-viewas-suggestions.open { display: block; }
.admin-viewas-suggestion {
  padding: 5px 10px;
  color: rgba(255, 210, 80, 0.85);
  cursor: pointer;
  font-size: 0.76rem;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-viewas-suggestion:hover,
.admin-viewas-suggestion.active {
  background: rgba(255, 200, 0, 0.14);
  color: #ffd844;
}
.admin-viewas-suggestion i { opacity: 0.5; font-size: 0.72rem; }

/* Impersonation banner */
.admin-bar-impersonate-notice {
  background: linear-gradient(90deg, #1a0800 0%, #200c00 40%, #180a00 100%);
  border-top: 1px solid rgba(255, 120, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 30px;
  overflow: hidden;
  animation: admin-imp-pulse 3s ease-in-out infinite;
}
@keyframes admin-imp-pulse {
  0%, 100% { border-top-color: rgba(255, 120, 0, 0.35); }
  50%       { border-top-color: rgba(255, 160, 0, 0.7); }
}

.admin-bar-imp-icon {
  color: #ff8c00;
  font-size: 0.85rem;
  animation: admin-imp-wiggle 4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes admin-imp-wiggle {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(-8deg); }
  96% { transform: rotate(8deg); }
}

.admin-bar-imp-text {
  color: #ffb84d;
  font-size: 0.77rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-bar-imp-text strong { color: #ffcc00; }
.admin-bar-imp-hint {
  color: rgba(255, 160, 60, 0.55);
  font-size: 0.71rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-bar-exit-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255, 80, 0, 0.18);
  border: 1px solid rgba(255, 100, 0, 0.45);
  border-radius: 4px;
  color: #ff8c40;
  cursor: pointer;
  padding: 2px 10px;
  font-size: 0.73rem;
  font-family: var(--font, system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
}
.admin-bar-exit-btn:hover {
  background: rgba(255, 80, 0, 0.35);
  border-color: rgba(255, 120, 0, 0.7);
  color: #ffaa66;
}

/* Preview As role pills */
.admin-bar-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.admin-bar-preview-label {
  color: rgba(255,210,80,0.55);
  font-size: 0.72rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-bar-preview-pills {
  display: flex;
  gap: 2px;
}
.admin-bar-preview-pill {
  background: rgba(255,200,0,0.07);
  border: 1px solid rgba(255,200,0,0.18);
  border-radius: 3px;
  color: rgba(255,210,80,0.55);
  cursor: pointer;
  font-size: 0.71rem;
  font-family: var(--font, system-ui, sans-serif);
  padding: 1px 7px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.admin-bar-preview-pill:hover {
  background: rgba(255,200,0,0.16);
  color: #ffd844;
  border-color: rgba(255,200,0,0.4);
}
.admin-bar-preview-pill.active {
  background: rgba(255,200,0,0.22);
  color: #ffd844;
  border-color: rgba(255,200,0,0.55);
  font-weight: 600;
}

/* Floating exit-preview pill */
#admin-preview-exit-pill {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 99999;
  background: #1a1200;
  border: 1px solid rgba(255,200,0,0.45);
  border-radius: 20px;
  color: #ffd844;
  font-size: 0.76rem;
  font-family: var(--font, system-ui, sans-serif);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  animation: preview-pill-in 0.2s ease;
}
@keyframes preview-pill-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#admin-preview-exit-pill span { font-weight: 600; }
#admin-preview-exit-btn {
  background: rgba(255,200,0,0.15);
  border: 1px solid rgba(255,200,0,0.35);
  border-radius: 10px;
  color: #ffd844;
  cursor: pointer;
  font-size: 0.71rem;
  font-family: var(--font, system-ui, sans-serif);
  padding: 1px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
#admin-preview-exit-btn:hover { background: rgba(255,200,0,0.3); }

/* Body class rules: simulate role views */
body.preview-as-user .admin-bar,
body.preview-as-mod  .admin-bar { display: none !important; }

/* Hide all owner/admin/mod actions in user preview */
body.preview-as-user #a_delete,
body.preview-as-user #a_rethumb,
body.preview-as-user .removetag,
body.preview-as-user .can-cycle,
body.preview-as-user .info-title-edit-wrap,
body.preview-as-user #info-title-save,
body.preview-as-user #info-title-status,
body.preview-as-user #info-visibility-edit-btn,
body.preview-as-user #info-rethumb-btn,
body.preview-as-user #info-set-expiry-btn,
body.preview-as-user .infobox-action-btn,
body.preview-as-user .btn-infobox-action,
body.preview-as-user .admin-delete-btn,
body.preview-as-user .admin-edit-btn,
body.preview-as-user .admin-pin-btn,
body.preview-as-user .delete-btn,
body.preview-as-user .poll-delete-btn { display: none !important; }
/* Title stays visible but loses its click-to-edit */
body.preview-as-user .item_title_text { display: inline !important; cursor: default !important; pointer-events: none !important; }
body.preview-as-user .item_title_text.no-title { display: none !important; }

/* Hide admin-only actions in mod preview (keep delete — mods can delete) */
body.preview-as-mod #a_rethumb,
body.preview-as-mod .removetag,
body.preview-as-mod #info-rethumb-btn,
body.preview-as-mod .btn-infobox-action { display: none !important; }

@media (max-width: 640px) {
  .admin-bar-imp-hint { display: none; }
  .admin-bar-links a span:not(.admin-bar-badge) { display: none; }
  .admin-bar-input { width: 110px; }
  .admin-bar-input:focus { width: 140px; }
  .admin-bar-preview-label { display: none; }
}
</style>

<script>
(function() {
  'use strict';

  /* ── Admin bar: Sidebar Width Awareness & Hotkey Toggle ────────────────── */
  const adminBar    = document.getElementById('admin-bar');
  const closeBtn    = document.getElementById('admin-bar-close');
  const closeImpBtn = document.getElementById('admin-bar-close-imp');

  function syncAdminBarSidebars() {
    if (!adminBar) return;

    // Right sidebar detection
    const rightSb = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
    const isRightHidden = !rightSb ||
                          document.body.classList.contains('sidebar-right-hidden') ||
                          window.getComputedStyle(rightSb).display === 'none' ||
                          window.getComputedStyle(rightSb).visibility === 'hidden';

    let rw = 0;
    if (!isRightHidden && rightSb) {
      rw = rightSb.offsetWidth || (window.innerWidth <= 999 ? Math.min(280, Math.round(window.innerWidth * 0.8)) : 300);
    }

    // Left sidebar detection (modern layout item page)
    const leftSb = document.querySelector('.item-sidebar-left');
    const isLeftHidden = !leftSb ||
                         document.body.classList.contains('sidebar-left-hidden') ||
                         document.body.classList.contains('comments-hidden') ||
                         window.innerWidth < 1000 ||
                         window.getComputedStyle(leftSb).display === 'none' ||
                         window.getComputedStyle(leftSb).visibility === 'hidden' ||
                         !!document.querySelector('.item-layout-container.sidebar-hidden');

    let lw = 0;
    if (!isLeftHidden && leftSb) {
      lw = leftSb.offsetWidth || Math.min(350, Math.round(window.innerWidth * 0.3));
    }

    adminBar.style.setProperty('--admin-bar-right', rw + 'px');
    adminBar.style.setProperty('--admin-bar-left', lw + 'px');
    adminBar.style.right = rw + 'px';
    adminBar.style.left = lw + 'px';
  }

  function openAdminBar() {
    if (!adminBar) return;
    syncAdminBarSidebars();
    adminBar.classList.add('open');
    document.body.classList.add('admin-bar-open');
  }

  function closeAdminBar() {
    if (!adminBar) return;
    adminBar.classList.remove('open');
    document.body.classList.remove('admin-bar-open');
  }

  function toggleAdminBar() {
    if (!adminBar) return;
    if (adminBar.classList.contains('open')) {
      closeAdminBar();
    } else {
      openAdminBar();
    }
  }

  if (closeBtn) closeBtn.addEventListener('click', closeAdminBar);
  if (closeImpBtn) closeImpBtn.addEventListener('click', closeAdminBar);

  window.addEventListener('keydown', (e) => {
    // Never trigger if focus is inside an input, textarea, select or contenteditable
    const target = e.target;
    const tag = (target && target.tagName) ? target.tagName.toUpperCase() : '';
    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (target && target.isContentEditable)) {
      return;
    }

    // Hotkey: '^' or '~' (also match Backquote key without modifier keys)
    const isHotkey = (
      e.key === '^' ||
      e.key === '~' ||
      (e.code === 'Backquote' && !e.ctrlKey && !e.metaKey && !e.altKey)
    );

    if (isHotkey) {
      e.preventDefault();
      toggleAdminBar();
      return;
    }

    // Escape closes admin bar if open
    if (e.key === 'Escape' && adminBar && adminBar.classList.contains('open')) {
      closeAdminBar();
    }
  });

  // Watch body class changes for sidebar toggles
  if (window.MutationObserver) {
    const bodyObserver = new MutationObserver(() => {
      syncAdminBarSidebars();
    });
    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
  }

  window.addEventListener('resize', syncAdminBarSidebars, { passive: true });
  document.addEventListener('f0ck:contentLoaded', syncAdminBarSidebars);
  document.addEventListener('transitionend', (e) => {
    if (e.target && (e.target.classList.contains('global-sidebar-right') ||
                     e.target.classList.contains('item-sidebar-right') ||
                     e.target.classList.contains('item-sidebar-left'))) {
      syncAdminBarSidebars();
    }
  });

  /* ── Admin bar: View-As (impersonation) ────────────────────────────────── */
  const input      = document.getElementById('admin-viewas-input');
  const suggestBox = document.getElementById('admin-viewas-suggestions');
  const viewAsBtn  = document.getElementById('admin-viewas-btn');
  const exitBtn    = document.getElementById('admin-bar-exit-impersonate');

  let _suggestTimer = null;
  let _suggestions  = [];
  let _activeIdx    = -1;

  function closeSuggestions() {
    if (suggestBox) { suggestBox.innerHTML = ''; suggestBox.classList.remove('open'); }
    _suggestions = [];
    _activeIdx   = -1;
  }

  function renderSuggestions(list) {
    if (!suggestBox) return;
    suggestBox.innerHTML = '';
    if (!list || list.length === 0) { suggestBox.classList.remove('open'); return; }
    list.forEach((u, i) => {
      const el = document.createElement('div');
      el.className = 'admin-viewas-suggestion';
      el.innerHTML = '<i class="fa-solid fa-user"></i>' + u.user;
      el.dataset.username = u.user;
      el.addEventListener('mousedown', (e) => { e.preventDefault(); selectSuggestion(u.user); });
      el.addEventListener('mouseenter', () => { setActive(i); });
      suggestBox.appendChild(el);
    });
    _suggestions = list;
    _activeIdx = -1;
    suggestBox.classList.add('open');
  }

  function setActive(idx) {
    const items = suggestBox ? suggestBox.querySelectorAll('.admin-viewas-suggestion') : [];
    items.forEach((el, i) => el.classList.toggle('active', i === idx));
    _activeIdx = idx;
  }

  function selectSuggestion(username) {
    if (input) input.value = username;
    closeSuggestions();
  }

  function fetchSuggestions(q) {
    if (!q || q.length < 1) { closeSuggestions(); return; }
    fetch('/api/v2/admin/users/search?q=' + encodeURIComponent(q), {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(r => r.json()).then(data => {
      if (Array.isArray(data)) renderSuggestions(data);
    }).catch(() => {});
  }

  if (input) {
    input.addEventListener('input', () => {
      clearTimeout(_suggestTimer);
      const q = input.value.trim();
      if (!q) { closeSuggestions(); return; }
      _suggestTimer = setTimeout(() => fetchSuggestions(q), 200);
    });

    input.addEventListener('keydown', (e) => {
      const items = suggestBox ? suggestBox.querySelectorAll('.admin-viewas-suggestion') : [];
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setActive(Math.min(_activeIdx + 1, items.length - 1));
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setActive(Math.max(_activeIdx - 1, -1));
      } else if (e.key === 'Enter') {
        e.preventDefault();
        if (_activeIdx >= 0 && _suggestions[_activeIdx]) {
          selectSuggestion(_suggestions[_activeIdx].user);
        } else {
          startImpersonation();
        }
      } else if (e.key === 'Escape') {
        closeSuggestions();
        input.blur();
      }
    });

    input.addEventListener('blur', () => {
      setTimeout(closeSuggestions, 150);
    });
  }

  function startImpersonation() {
    const username = input ? input.value.trim() : '';
    if (!username) return;
    if (viewAsBtn) { viewAsBtn.disabled = true; }

    const csrf = (typeof window.f0ckSession !== 'undefined' && window.f0ckSession.csrf_token)
      ? window.f0ckSession.csrf_token
      : (document.querySelector('meta[name="csrf-token"]')?.content || '');

    const params = new URLSearchParams();
    params.append('username', username);
    if (csrf) params.append('csrf_token', csrf);

    fetch('/api/v2/admin/impersonate', {
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
      body: params
    }).then(r => r.json()).then(data => {
      if (data.success) {
        window.location.reload();
      } else {
        alert('Impersonation failed: ' + (data.msg || 'Unknown error'));
        if (viewAsBtn) viewAsBtn.disabled = false;
      }
    }).catch(e => {
      alert('Network error: ' + e.message);
      if (viewAsBtn) viewAsBtn.disabled = false;
    });
  }

  if (viewAsBtn) {
    viewAsBtn.addEventListener('click', startImpersonation);
  }

  /* ── Exit impersonation ─────────────────────────────────────────────────── */
  if (exitBtn) {
    exitBtn.addEventListener('click', () => {
      exitBtn.disabled = true;
      exitBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Exiting…';

      const csrf = (typeof window.f0ckSession !== 'undefined' && window.f0ckSession.csrf_token)
        ? window.f0ckSession.csrf_token
        : (document.querySelector('meta[name="csrf-token"]')?.content || '');

      const params = new URLSearchParams();
      if (csrf) params.append('csrf_token', csrf);

      fetch('/api/v2/admin/stop-impersonate', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
        body: params
      }).then(() => {
        window.location.reload();
      }).catch(() => {
        window.location.reload();
      });
    });
  }

  /* ── Admin bar: Preview As role toggle ──────────────────────────────────── */
  // The role is applied server-side (cookie preview_role, see src/index.mjs): templates, f0ckSession and
  // admin/mod-guarded routes all behave as that role. Switching sets the cookie and reloads.
  (function() {
    const COOKIE = 'preview_role';
    const pills       = document.querySelectorAll('.admin-bar-preview-pill');
    const exitPill    = document.getElementById('admin-preview-exit-pill');
    const exitLabel   = document.getElementById('admin-preview-exit-label');
    const exitBtn     = document.getElementById('admin-preview-exit-btn');

    const roleLabels = { admin: 'Admin', mod: 'Moderator', user: 'User' };

    function applyRole(role) {
      document.body.classList.remove('preview-as-user', 'preview-as-mod');
      if (role === 'user') document.body.classList.add('preview-as-user');
      if (role === 'mod')  document.body.classList.add('preview-as-mod');

      // Update active pill
      pills.forEach(p => p.classList.toggle('active', p.dataset.role === role));

      // Show/hide exit pill
      if (exitPill) {
        if (role !== 'admin') {
          if (exitLabel) exitLabel.textContent = 'Previewing as ' + roleLabels[role];
          exitPill.style.display = 'flex';
        } else {
          exitPill.style.display = 'none';
        }
      }
    }

    function switchRole(role) {
      const secure = location.protocol === 'https:' ? '; Secure' : '';
      // No template literals here: the view engine would evaluate the placeholders server-side
      document.cookie = role === 'admin'
        ? COOKIE + '=; path=/; max-age=0; SameSite=Lax' + secure
        : COOKIE + '=' + role + '; path=/; max-age=86400; SameSite=Lax' + secure;
      location.reload();
    }

    // The server tells which role this page was rendered as
    try { localStorage.removeItem('f0ck_preview_role'); } catch {} // old client-only preview
    const current = (adminBar && adminBar.dataset.previewRole) || 'admin';
    applyRole(roleLabels[current] ? current : 'admin');

    pills.forEach(pill => {
      pill.addEventListener('click', () => {
        const role = pill.dataset.role;
        if (role !== current) switchRole(role);
      });
    });

    if (exitBtn) exitBtn.addEventListener('click', () => switchRole('admin'));
  })();

})();
</script>
@endif