@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 }}" style="max-height: 40px; vertical-align: middle; max-width: 180px; width: initial;">
    @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(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>
        @if(!/^\/\d$/.test(url.pathname))
        <a href="/random" id="nav-random" title="{{ t('nav.random') }}"><i class="fa-solid fa-shuffle"></i></a>
        @endif
      </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)
            <span class="nav-avatar-icon" style="font-size: 1.2em; margin-right: 6px; display: inline-flex; align-items: center; cursor: pointer;" 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 }}"><i class="fa-solid fa-user-secret"></i></span>
          @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
          @if(enable_anonymous_access && session.is_anon)
          <a href="#" id="nav-user-anon-identity-btn" onclick="event.preventDefault(); if(window.f0ckAnonSSH) { window.f0ckAnonSSH.openModal(); } else { const m = document.getElementById('anon-ssh-modal'); if (m) m.style.display='flex'; }"><i class="fa-solid fa-key"></i> Key Management</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">{{ 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">
              <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>
            </div>
            <button id="mark-all-read" title="{{ t('nav.mark_all_read') }}"><i class="fa-solid fa-check-double"></i></button>
          </div>
          <div class="notif-list" data-active-tab="user">
            <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>
          <div class="submanage">
            <a href="/subscriptions">{{ t('nav.manage_subscriptions') }}</a>
          </div>
        </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"><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)
<!-- Admin Bar (Bottom, hotkey-activated) -->
<div class="admin-bar" id="admin-bar">
  @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-brand">
      <i class="fa-solid fa-shield-halved"></i>
      <span>Admin</span>
    </div>

    <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)
<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 }}" 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" 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
      @if(!/^\/\d$/.test(url.pathname))
      <a href="/random" id="nav-random" title="Random"><i class="fa-solid fa-shuffle"></i></a>
      @endif
      <a href="#" id="nav-search-btn" title="Search"><i class="fa-solid fa-magnifying-glass"></i></a>
      @if(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>
        <span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
      </a>
      @endif
    </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: max-content; 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-login-anon-btn" @if(session && session.is_anon) style="display:none;" @endif><i class="fa-solid fa-user-secret"></i> Login as anonymous</a>
        <a href="#" id="nav-anon-identity-btn" @if(!session || !session.is_anon) style="display:none;" @endif onclick="event.preventDefault(); if(window.f0ckAnonSSH) { window.f0ckAnonSSH.openModal(); } else { const m = document.getElementById('anon-ssh-modal'); if (m) m.style.display='flex'; }"><i class="fa-solid fa-key"></i> Key Management</a>
        <a href="/settings" id="nav-anon-settings-btn" @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>
        <a href="#" id="nav-register-btn">{{ t('nav.register') }}</a>
        @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



<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">
      <form class="login-form" method="post" action="/login" novalidate>
        <h2 style="text-align: center; margin-bottom: 20px;">{{ t('auth.login_title') }}</h2>
        <input type="text" name="username" placeholder="{{ t('auth.username_or_email') }}" autocomplete="off" required />
        <input type="password" name="password" placeholder="{{ t('auth.password_placeholder_min') }}" autocomplete="off" required />
        <p style="text-align: left; font-size: 0.9em; margin: 0;"><input type="checkbox" id="kmsi-modal" name="kmsi" />
          <label for="kmsi-modal">{{ t('auth.stay_signed_in') }}</label>
        </p>
        <button type="submit">{{ t('auth.login_title') }}</button>
        @if(smtp_enabled)
        <div style="text-align: center; margin-top: 10px;">
          <a href="#" id="modal-forgot-btn" style="font-size: 0.85em; color: var(--accent); text-decoration: underline;">{{ t('auth.forgot_password') }}</a>
        </div>
        @endif
        @if(registration_open || private_society)
        <p style="text-align: center; font-size: 0.9em; margin-top: 15px; color: #888;">
          {{ t('auth.no_account') }} <a href="#" id="login-to-register" style="color: var(--accent); text-decoration: underline;">{{ t('auth.register_now') }}</a>
        </p>
        @endif
        @if(enable_anonymous_access)
        <div style="margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px; text-align: center;">
          <button type="button" id="modal-login-as-anon-btn" class="btn btn-sm" style="background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #ddd; border-radius: 4px; padding: 7px 14px; font-size: 0.88em; cursor: pointer; width: 100%; transition: background 0.2s;">
            <i class="fa-solid fa-user-secret"></i> Login as anonymous
          </button>
        </div>
        @endif
      </form>
    </div>

    @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 OpenSSH Ed25519 Identity Modal -->
<div id="anon-ssh-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 class="login-modal-content" style="max-width: 540px; width: 92vw; max-height: 90vh; overflow-y: auto; text-align: left; padding: 25px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: var(--bg-primary, #111); box-shadow: 0 10px 40px rgba(0,0,0,0.8);">
    <button id="anon-ssh-modal-close" style="position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--text-muted, #aaa); font-size: 1.4em; cursor: pointer; line-height: 1;">&times;</button>
    
    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
      <i class="fa-solid fa-key" style="color: var(--accent, #0096ff); font-size: 1.3em;"></i>
      <h3 style="margin: 0; font-size: 1.25em; color: var(--text-color, #fff);">Anonymous SSH Identity</h3>
    </div>
    <p style="margin: 0 0 15px 0; font-size: 0.85em; color: var(--text-muted, #aaa); line-height: 1.4;">
      Your browser holds an <strong>OpenSSH Ed25519</strong> private key. Your comments and favorites belong to this key without needing a password.
    </p>

    <!-- Tabs -->
    <div style="display: flex; gap: 8px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;">
      <button type="button" id="anon-tab-btn-identity" class="btn btn-sm btn-primary" style="font-size: 0.85em; padding: 5px 12px;">My Identity</button>
      <button type="button" id="anon-tab-btn-import" class="btn btn-sm btn-secondary" style="font-size: 0.85em; padding: 5px 12px;">Import / Supply Key</button>
    </div>

    <!-- Tab 1: Current Identity -->
    <div id="anon-tab-identity">
      <div style="margin-bottom: 12px;">
        <label style="display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #888); margin-bottom: 4px;">Fingerprint</label>
        <div style="display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); padding: 8px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);">
          <code id="anon-ssh-fp-display" style="font-family: monospace; font-size: 0.88em; color: var(--accent, #00d2ff); word-break: break-all; flex: 1;">Generating...</code>
          <button type="button" id="anon-copy-fp-btn" title="Copy Fingerprint" class="btn btn-sm" style="background: transparent; border: none; color: #aaa; cursor: pointer; padding: 4px;"><i class="fa-solid fa-copy"></i></button>
        </div>
      </div>

      <div style="margin-bottom: 15px;">
        <label style="display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #888); margin-bottom: 4px;">OpenSSH Public Key (<code>id_ed25519.pub</code>)</label>
        <textarea id="anon-ssh-pub-display" readonly rows="2" style="width: 100%; box-sizing: border-box; font-family: monospace; font-size: 0.82em; background: rgba(0,0,0,0.4); color: #ddd; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 8px; resize: none;"></textarea>
      </div>

      <div style="display: flex; flex-wrap: wrap; gap: 8px;">
        <button type="button" id="anon-copy-pub-btn" class="btn btn-sm btn-secondary" style="font-size: 0.85em; padding: 6px 12px;"><i class="fa-solid fa-copy"></i> Copy Public Key</button>
        <button type="button" id="anon-dl-priv-btn" class="btn btn-sm btn-primary" style="font-size: 0.85em; padding: 6px 12px;"><i class="fa-solid fa-download"></i> Download id_ed25519</button>
        <button type="button" id="anon-dl-pub-btn" class="btn btn-sm btn-secondary" style="font-size: 0.85em; padding: 6px 12px;"><i class="fa-solid fa-download"></i> Download id_ed25519.pub</button>
      </div>
    </div>

    <!-- Tab 2: Import Key -->
    <div id="anon-tab-import" style="display: none;">
      <p style="font-size: 0.85em; color: var(--text-muted, #aaa); margin-top: 0; margin-bottom: 10px;">
        Paste your existing <code>id_ed25519</code> OpenSSH private key or raw 32-byte seed to restore your anonymous identity on this browser.
      </p>
      <textarea id="anon-import-key-input" rows="4" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----" style="width: 100%; box-sizing: border-box; font-family: monospace; font-size: 0.82em; background: rgba(0,0,0,0.4); color: #ddd; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 8px; resize: vertical; margin-bottom: 10px;"></textarea>
      
      <input type="file" id="anon-import-file-elem" style="display: none;" />
      
      <div style="display: flex; gap: 8px; align-items: center;">
        <button type="button" id="anon-upload-key-btn" class="btn btn-sm btn-secondary" style="font-size: 0.85em; padding: 6px 12px;"><i class="fa-solid fa-upload"></i> Upload File</button>
        <button type="button" id="anon-submit-import-btn" class="btn btn-sm btn-primary" style="font-size: 0.85em; padding: 6px 16px;"><i class="fa-solid fa-check"></i> Activate Key</button>
      </div>
      <div id="anon-import-status" style="margin-top: 10px; font-size: 0.85em; display: none;"></div>
    </div>

  </div>
</div>

<script>
(function(){
  // Tab switching
  const tabBtnId = document.getElementById('anon-tab-btn-identity');
  const tabBtnImp = document.getElementById('anon-tab-btn-import');
  const tabId = document.getElementById('anon-tab-identity');
  const tabImp = document.getElementById('anon-tab-import');
  if(tabBtnId && tabBtnImp && tabId && tabImp){
    tabBtnId.addEventListener('click', function(){
      tabId.style.display = 'block';
      tabImp.style.display = 'none';
      tabBtnId.classList.remove('btn-secondary'); tabBtnId.classList.add('btn-primary');
      tabBtnImp.classList.remove('btn-primary'); tabBtnImp.classList.add('btn-secondary');
    });
    tabBtnImp.addEventListener('click', function(){
      tabId.style.display = 'none';
      tabImp.style.display = 'block';
      tabBtnImp.classList.remove('btn-secondary'); tabBtnImp.classList.add('btn-primary');
      tabBtnId.classList.remove('btn-primary'); tabBtnId.classList.add('btn-secondary');
    });
  }

  // Copy buttons
  const copyPubBtn = document.getElementById('anon-copy-pub-btn');
  if(copyPubBtn){
    copyPubBtn.addEventListener('click', function(){
      if(window.f0ckAnonSSH) window.f0ckAnonSSH.copyPublicKey();
    });
  }
  const copyFpBtn = document.getElementById('anon-copy-fp-btn');
  if(copyFpBtn){
    copyFpBtn.addEventListener('click', function(){
      const fp = document.getElementById('anon-ssh-fp-display')?.textContent;
      if(fp && navigator.clipboard){
        navigator.clipboard.writeText(fp).then(function(){
          if(typeof window.showToastNotification === 'function') window.showToastNotification('Fingerprint copied!');
        });
      }
    });
  }

  // Download buttons
  const dlPriv = document.getElementById('anon-dl-priv-btn');
  if(dlPriv){
    dlPriv.addEventListener('click', function(){
      if(window.f0ckAnonSSH) window.f0ckAnonSSH.downloadPrivateKey();
    });
  }
  const dlPub = document.getElementById('anon-dl-pub-btn');
  if(dlPub){
    dlPub.addEventListener('click', function(){
      if(window.f0ckAnonSSH) window.f0ckAnonSSH.downloadPublicKey();
    });
  }

  // File upload trigger
  const uploadBtn = document.getElementById('anon-upload-key-btn');
  const fileElem = document.getElementById('anon-import-file-elem');
  const inputElem = document.getElementById('anon-import-key-input');
  if(uploadBtn && fileElem){
    uploadBtn.addEventListener('click', function(){ fileElem.click(); });
    fileElem.addEventListener('change', function(){
      if(fileElem.files && fileElem.files[0]){
        const reader = new FileReader();
        reader.onload = function(e){
          if(inputElem) inputElem.value = e.target.result;
        };
        reader.readAsText(fileElem.files[0]);
      }
    });
  }

  // Submit import
  const submitImpBtn = document.getElementById('anon-submit-import-btn');
  const statusEl = document.getElementById('anon-import-status');
  if(submitImpBtn){
    submitImpBtn.addEventListener('click', async function(){
      const keyVal = inputElem?.value;
      if(!keyVal || !keyVal.trim()){
        if(statusEl){ statusEl.style.display = 'block'; statusEl.style.color = '#ff4444'; statusEl.textContent = 'Please paste a key or select a file'; }
        return;
      }
      try {
        submitImpBtn.disabled = true;
        submitImpBtn.textContent = 'Importing...';
        await window.f0ckAnonSSH.importKey(keyVal);
        if(statusEl){
          statusEl.style.display = 'block';
          statusEl.style.color = '#00C851';
          statusEl.textContent = 'Key activated successfully! Reloading...';
        }
        setTimeout(function(){ window.location.reload(); }, 800);
      } catch(err){
        submitImpBtn.disabled = false;
        submitImpBtn.innerHTML = '<i class="fa-solid fa-check"></i> Activate Key';
        if(statusEl){
          statusEl.style.display = 'block';
          statusEl.style.color = '#ff4444';
          statusEl.textContent = 'Import error: ' + (err.message || err);
        }
      }
    });
  }
})();
</script>
@endif

@if(!private_society || session)
<!-- Shortcuts Modal -->
<div id="shortcuts-modal" style="display: none;">
  <div class="login-modal-content">
    <button id="shortcuts-modal-close">&times;</button>
    <div class="shortcuts-content">
      <h2 style="text-align: center; margin-bottom: 20px;">{{ t('shortcuts.title') }}</h2>
      <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>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>

<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>
    <form class="login-form" id="modal-register-form" method="post" action="/register" novalidate>
      <h2 style="text-align: center; margin-bottom: 20px;">{{ t('auth.register_title') }}</h2>
      <div id="register-status" style="margin-bottom: 15px; text-align: center; font-size: 0.9em;"></div>
      <input type="text" name="username" placeholder="{{ t('auth.username_placeholder') }}" autocomplete="off" required />
      <input type="password" name="password" placeholder="{{ t('auth.password_placeholder') }}" autocomplete="off" required minlength="20"
        title="Must be at least 20 characters long." />
      <input type="password" name="password_confirm" placeholder="{{ t('auth.confirm_password') }}" autocomplete="off" required minlength="20" />
      @if(!registration_open)
      <input type="text" name="token" placeholder="{{ t('auth.invite_token') }}" autocomplete="off" required />
      @elseif(registration_require_mail_andor_token)
      <input type="email" name="email" placeholder="{{ t('auth.email_placeholder') }}" autocomplete="off" required />
      @endif
      <input type="text" name="email_confirm_field" style="display: none !important;" tabindex="-1" autocomplete="off" />
      <p style="text-align: left; font-size: 0.9em; margin: 0; color: #fff;">
        <input type="checkbox" id="tos-modal" name="tos" required />
        <label for="tos-modal">@if(private_society){{ t('auth.tos_private') }}@else{{ t('auth.tos_public') }} <a href="/terms" target="_blank" style="color: var(--accent); text-decoration: underline;">{{ t('auth.tos_terms') }}</a>, <a href="/rules" target="_blank" style="color: var(--accent); text-decoration: underline;">{{ t('auth.tos_rules') }}</a> {{ t('auth.tos_age') }}@endif</label>
      </p>
      @if(recaptcha_enabled)
      <div id="modal-register-recaptcha" style="margin: 10px 0;"></div>
      @endif
      <button type="submit">{{ t('auth.create_account') }}</button>
      <div style="text-align: center; margin-top: 20px;">
        <a href="#" id="register-to-login" style="font-size: 0.9em; color: var(--accent); text-decoration: underline;">{{ t('auth.back_to_login') }}</a>
      </div>
    </form>
  </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">{{ t('upload.title') }}</div>

          <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>

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

@endif

@if(recaptcha_enabled && !session)
<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))
<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,
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 ──────────────────────────────────── */
  (function() {
    const STORAGE_KEY = 'f0ck_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';
        }
      }
    }

    // Init from localStorage
    const saved = localStorage.getItem(STORAGE_KEY) || 'admin';
    applyRole(saved);

    // Pill click
    pills.forEach(pill => {
      pill.addEventListener('click', () => {
        const role = pill.dataset.role;
        localStorage.setItem(STORAGE_KEY, role);
        applyRole(role);
      });
    });

    // Exit button
    if (exitBtn) {
      exitBtn.addEventListener('click', () => {
        localStorage.setItem(STORAGE_KEY, 'admin');
        applyRole('admin');
      });
    }
  })();

})();
</script>
@endif