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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
    content="{{ settings.event_title }} — {{ settings.event_tagline or 'Competitive esports championship registration.' }}">
  <title>{% block title %}{{ settings.event_title }}{% endblock %}</title>
  {% set pub_logo = img(settings.site_logo) if settings and settings.site_logo else '' %}
  {% if pub_logo %}
  <link rel="icon" type="image/png"
    href="{{ url_for('serve_media', filename=pub_logo) }}?v={{ cache_bust }}">
  <link rel="shortcut icon" type="image/png"
    href="{{ url_for('serve_media', filename=pub_logo) }}?v={{ cache_bust }}">
  <link rel="apple-touch-icon"
    href="{{ url_for('serve_media', filename=pub_logo) }}?v={{ cache_bust }}">
  {% endif %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Outfit:wght@300;400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap"
    rel="stylesheet">
  <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="{% block body_class %}{% endblock %}"
  style="--site-nav-bg: {{ settings.nav_bg_color or '#d4a017' }}; --site-nav-text: {{ settings.nav_text_color or '#111827' }}; --site-nav-accent: {{ settings.nav_accent_color or '#e8384f' }};">
  <nav class="nav">
    <div class="wrap nav-inner">
      <a class="brand{% if pub_logo %} has-logo{% endif %}" href="{{ url_for('index') }}">
        {% if pub_logo %}<img class="brand-logo"
          src="{{ url_for('serve_media', filename=pub_logo) }}"
          alt="{{ settings.event_title }} logo">{% else %}<span class="brand-mark">NX</span>{% endif %}
        <span class="brand-text">
          <span><span style="color:#e8384f">Nexora</span> <span style="color:#f0c040">Esports</span></span>
        </span>
      </a>

      <button class="menu-toggle" type="button" data-menu-toggle aria-label="Toggle menu" aria-expanded="false">
        <i class="fas fa-bars"></i>
      </button>

    </div>
  </nav>

  <!-- Mobile slide-in menu (outside nav to avoid iOS fixed-inside-fixed touch bug) -->
  <div class="nav-links" data-menu>
    <button class="sidebar-close" type="button" data-sidebar-close aria-label="Close menu">
      <i class="fas fa-xmark"></i>
    </button>
    <a href="{{ url_for('index') }}" class="{% if request.endpoint == 'index' %}active{% endif %}">Home</a>
    <a href="{{ url_for('gallery') }}" class="{% if request.endpoint == 'gallery' %}active{% endif %}">Gallery</a>
    <a href="{{ url_for('about') }}" class="{% if request.endpoint == 'about' %}active{% endif %}">About Us</a>
    <a href="{{ url_for('our_team') }}" class="{% if request.endpoint == 'our_team' %}active{% endif %}">Our Team</a>
    <a href="{{ url_for('register') }}"
      class="nav-cta {% if request.endpoint == 'register' %}active{% endif %}">Register Now</a>
  </div>
  <div class="nav-overlay" data-nav-overlay></div>

  {% 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 %}

  <main>
    {% block content %}{% endblock %}
  </main>

  <footer class="footer compact-footer">
    <div class="wrap compact-footer-inner">
      <div class="footer-left">
        <a class="brand{% if pub_logo %} has-logo{% endif %}" href="{{ url_for('admin_login') }}">
          {% if pub_logo %}<img class="brand-logo"
            src="{{ url_for('serve_media', filename=pub_logo) }}"
            alt="{{ settings.event_title }} logo">{% else %}<span class="brand-mark">NX</span>{% endif %}
          <span class="brand-text"><span>Nexora</span><small>Esports</small></span>
        </a>
        <span class="footer-copyright">&copy; {{ current_year }} {{ settings.event_title }}. All rights reserved.</span>
      </div>

      <div class="footer-center">
        <a href="{{ url_for('index') }}">Home</a>
        <a href="{{ url_for('gallery') }}">Gallery</a>
        <a href="{{ url_for('our_team') }}">Our Team</a>
        <a href="{{ url_for('about') }}">About Us</a>
        <a href="{{ url_for('register') }}" class="footer-register-link">Register Now</a>
      </div>

      <div class="footer-right footer-social-mini">
        {% if settings.contact_email %}
        <a href="mailto:{{ settings.contact_email }}" aria-label="Email"><i class="fas fa-envelope"></i></a>
        {% endif %}
        <a href="https://wa.me/923310314962" target="_blank" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
        <a href="{{ settings.facebook_link or '#' }}" target="_blank" aria-label="Facebook"><i
            class="fab fa-facebook-f"></i></a>
        <a href="{{ settings.instagram_link or '#' }}" target="_blank" aria-label="Instagram"><i
            class="fab fa-instagram"></i></a>
        <a href="{{ settings.youtube_link or '#' }}" target="_blank" aria-label="YouTube"><i
            class="fab fa-youtube"></i></a>
      </div>
    </div>
  </footer>

  <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>
  {% block scripts %}{% endblock %}
</body>

</html>