<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Nexora Admin{% endblock %}</title>
  {% if settings and settings.site_logo %}
  <link rel="icon" type="image/png" href="{{ url_for('serve_media', filename=img(settings.site_logo)) }}?v={{ settings.site_logo }}">
  <link rel="shortcut icon" type="image/png" href="{{ url_for('serve_media', filename=img(settings.site_logo)) }}?v={{ settings.site_logo }}">
  <link rel="apple-touch-icon" href="{{ url_for('serve_media', filename=img(settings.site_logo)) }}?v={{ settings.site_logo }}">
  {% endif %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v={{ cache_bust }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/overrides.css') }}?v={{ cache_bust }}">
</head>

<body class="admin-body">

  <!-- Mobile top bar: hamburger opens the left slide-in drawer -->
  <header class="admin-topbar">
    <button class="admin-burger" type="button" data-admin-open aria-label="Open admin menu" aria-expanded="false"
      aria-controls="adminDrawer">
      <i class="fas fa-bars"></i>
    </button>
    <a class="brand{% if settings.site_logo %} has-logo{% endif %}" href="{{ url_for('admin_dashboard') }}">
      {% if settings.site_logo %}<img class="brand-logo" src="{{ url_for('serve_media', filename=img(settings.site_logo)) }}" alt="{{ settings.event_title }} logo">{% else %}<span class="brand-mark">NX</span>{% endif %}
      <span class="brand-text"><span>Nexora</span><small>Admin</small></span>
    </a>
    <a class="admin-topbar-out" href="{{ url_for('index') }}" target="_blank" aria-label="View website">
      <i class="fas fa-globe"></i>
    </a>
  </header>

  <div class="admin-backdrop" data-admin-backdrop hidden></div>

  <aside class="admin-side" id="adminDrawer" data-admin-drawer>
    <span class="side-ambience" aria-hidden="true"></span>
    <div class="admin-side-head">
      <a class="brand{% if settings.site_logo %} has-logo{% endif %}" href="{{ url_for('admin_dashboard') }}" title="Nexora Admin — Dashboard">
        {% if settings.site_logo %}<img class="brand-logo" src="{{ url_for('serve_media', filename=img(settings.site_logo)) }}" alt="{{ settings.event_title }} logo">{% else %}<span class="brand-mark">NX</span>{% endif %}
        <span class="brand-text"><span>Nexora</span><small>Admin</small></span>
      </a>
      <button class="admin-drawer-close" type="button" data-admin-close aria-label="Close admin menu">
        <i class="fas fa-xmark"></i>
      </button>
    </div>

    <div class="admin-side-nav" data-admin-side-nav>
      {% if can('view_dashboard') %}<span class="side-label">Overview</span>
      <a href="{{ url_for('admin_dashboard') }}" title="Dashboard"
        class="{% if request.endpoint == 'admin_dashboard' %}active{% endif %}">
        <i class="fas fa-chart-simple"></i> Dashboard</a>{% endif %}

      {% if can_any('games_view', 'media_view', 'leadership_view', 'sponsors_view', 'team_view', 'prize_pool_view') %}<span class="side-label">Content</span>{% endif %}
      {% if can('games_view') %}
      <a href="{{ url_for('admin_games') }}" title="Game Cards" class="{% if request.endpoint == 'admin_games' %}active{% endif %}">
        <i class="fas fa-gamepad"></i> Game Cards</a>
      {% endif %}
      {% if can('media_view') %}
      <a href="{{ url_for('admin_media') }}" title="Covers &amp; Gallery" class="{% if request.endpoint == 'admin_media' %}active{% endif %}">
        <i class="fas fa-images"></i> Covers &amp; Gallery</a>
      {% endif %}
      {% if can('leadership_view') %}
      <a href="{{ url_for('admin_leaders') }}" title="Leadership Quotes" class="{% if request.endpoint == 'admin_leaders' %}active{% endif %}">
        <i class="fas fa-quote-left"></i> Leadership Quotes</a>
      {% endif %}
      {% if can('sponsors_view') %}
      <a href="{{ url_for('admin_sponsors') }}" title="Sponsors" class="{% if request.endpoint == 'admin_sponsors' %}active{% endif %}">
        <i class="fas fa-handshake"></i> Sponsors</a>
      {% endif %}
      {% if can('team_view') %}
      <a href="{{ url_for('admin_team') }}" title="Our Team" class="{% if request.endpoint == 'admin_team' %}active{% endif %}">
        <i class="fas fa-users"></i> Our Team</a>
      {% endif %}
      {% if can('prize_pool_view') %}
      <a href="{{ url_for('admin_prize_pool') }}" title="Prize Pool"
        class="{% if request.endpoint == 'admin_prize_pool' %}active{% endif %}">
        <i class="fas fa-trophy"></i> Prize Pool</a>
      {% endif %}

      {% if can('view_registrations') or can('scan_qr_codes') or can('manually_verify_tickets') %}
      <span class="side-label">Management System</span>
      {% endif %}
      {% if can('view_registrations') %}
      <a href="{{ url_for('admin_registrations') }}" title="Registrations"
        class="{% if request.endpoint == 'admin_registrations' %}active{% endif %}">
        <i class="fas fa-users"></i> Registrations</a>
      {% endif %}
      {% if can('scan_qr_codes') or can('manually_verify_tickets') %}
      <a href="{{ url_for('admin_qr_scanner') }}" title="QR Scanner"
        class="{% if request.endpoint == 'admin_qr_scanner' %}active{% endif %}">
        <i class="fas fa-qrcode"></i> QR Scanner</a>
      {% endif %}
      {% if can('contacts_view') %}
      <a href="{{ url_for('admin_contacts') }}" title="Messages" class="{% if request.endpoint == 'admin_contacts' %}active{% endif %}">
        <i class="fas fa-envelope"></i> Messages</a>
      {% endif %}

      {% if can_any('users_view', 'roles_view', 'settings_view') %}
      <span class="side-label">System</span>
      {% endif %}
      {% if can('users_view') %}
      <a href="{{ url_for('admin_users') }}" title="Staff Users" class="{% if request.endpoint == 'admin_users' %}active{% endif %}"><i class="fas fa-user-shield"></i> Staff Users</a>
      {% endif %}
      {% if can('roles_view') %}
      <a href="{{ url_for('admin_roles') }}" title="Roles &amp; Permissions" class="{% if request.endpoint == 'admin_roles' %}active{% endif %}"><i class="fas fa-key"></i> Roles &amp; Permissions</a>
      {% endif %}
      {% if can('settings_view') %}
      <a href="{{ url_for('admin_settings') }}" title="Settings" class="{% if request.endpoint == 'admin_settings' %}active{% endif %}">
        <i class="fas fa-gear"></i> Settings</a>
      {% endif %}
    </div>

    <div class="admin-side-foot">
      <span class="side-label">External</span>
      <a href="{{ url_for('index') }}" target="_blank" title="View Website"><i class="fas fa-globe"></i> View Website</a>
      <form method="post" action="{{ url_for('admin_logout') }}" style="display:inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="logout" title="Logout"><i class="fas fa-right-from-bracket"></i> Logout</button>
      </form>
    </div>
  </aside>


  <main class="admin-main">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="flash-overlay" data-flash-overlay>
      {% for category, message in messages %}
      <div class="flash-modal {{ category }}" data-flash-modal>
        <button class="flash-modal-close" data-flash-close aria-label="Close">&times;</button>
        <div class="flash-modal-icon">
          <i class="fas {% if category == 'success' %}fa-circle-check{% elif category == 'danger' %}fa-circle-exclamation{% elif category == 'warning' %}fa-triangle-exclamation{% else %}fa-circle-info{% endif %}"></i>
        </div>
        <div class="flash-modal-body">
          <strong class="flash-modal-title">
            {% if category == 'success' %}Success{% elif category == 'danger' %}Error{% elif category == 'warning' %}Warning{% else %}Notice{% endif %}
          </strong>
          <p class="flash-modal-msg">{{ message }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
  </main>

  <script src="{{ url_for('static', filename='js/main.js') }}?v={{ cache_bust }}"></script>
  <script>
  (function(){
    var o=document.querySelector("[data-flash-overlay]");
    if(!o)return;
    var m=o.querySelectorAll("[data-flash-modal]");
    if(!m.length)return;
    o.classList.add("is-visible");
    function dismiss(){o.classList.remove("is-visible");setTimeout(function(){o.remove()},350)}
    o.addEventListener("click",function(e){
      if(e.target.closest("[data-flash-close]")){dismiss();return}
      if(e.target===o)dismiss();
    });
    document.addEventListener("keydown",function(e){if(e.key==="Escape"&&o.classList.contains("is-visible"))dismiss()});
    var t=setTimeout(dismiss,10000);
    m.forEach(function(el){
      el.addEventListener("mouseenter",function(){el.classList.add("is-paused");clearTimeout(t)});
      el.addEventListener("mouseleave",function(){el.classList.remove("is-paused");t=setTimeout(dismiss,4000)});
    });
  })();
  </script>
  <script>
  (function(){
    var csrf = {{ csrf_token() | tojson }};
    var EXPIRY_WARNING = 300;
    var HEARTBEAT_INTERVAL = 120000;
    var expiresAt = null;

    function heartbeat(){
      fetch("/admin/heartbeat",{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-Token":csrf}})
        .then(function(r){return r.json()})
        .then(function(d){
          if(d.ok && d.expires_in > 0){
            expiresAt = Date.now() + d.expires_in * 1000;
          }
        })["catch"](function(){});
    }

    function checkExpiry(){
      if(!expiresAt) return;
      var remaining = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
      if(remaining <= EXPIRY_WARNING && remaining > 0 && !document.getElementById("session-warn")){
        var bar = document.createElement("div");
        bar.id = "session-warn";
        bar.style.cssText = "position:fixed;bottom:0;left:0;right:0;background:#92400e;color:#fff;padding:10px 20px;text-align:center;z-index:99999;font-size:14px;display:flex;align-items:center;justify-content:center;gap:12px;";
        var mins = Math.floor(remaining / 60);
        var secs = remaining % 60;
        bar.innerHTML = '<i class="fas fa-clock"></i> Session expires in <strong id="session-countdown">' + mins + ':' + String(secs).padStart(2,'0') + '</strong>. <a href="/admin/heartbeat" onclick="event.preventDefault();location.reload()" style="color:#fbbf24;text-decoration:underline;">Stay logged in</a>';
        document.body.appendChild(bar);
      }
      var countdown = document.getElementById("session-countdown");
      if(countdown){
        var m = Math.floor(remaining / 60);
        var s = remaining % 60;
        countdown.textContent = m + ':' + String(s).padStart(2,'0');
      }
      if(remaining <= 0){ location.href = "/admin"; }
    }

    heartbeat();
    setInterval(heartbeat, HEARTBEAT_INTERVAL);
    setInterval(checkExpiry, 1000);
  })();
  </script>
</body>

</html>
