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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Roster{% endblock %}</title>
  {% if project_description %}
  <meta name="description" content="{{ project_description }}">
  {% endif %}
  {% load static %}
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  {% block head %}{% endblock %}
</head>

<body>
  <nav class="navbar navbar-expand-lg sticky-top py-2">
    <div class="container-fluid px-lg-5">
      <a class="navbar-brand brand-font d-flex align-items-center" href="/">
        <img src="{% static 'core/images/logo.png' %}?v={{ deployment_timestamp }}" alt="Roster Logo" style="height: 48px; filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.5));">
      </a>
      <button class="navbar-toggler border-0 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <i class="bi bi-list fs-1"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto align-items-center">
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'home' %}">Explore</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'about' %}">About</a>
          </li>
          {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link px-3 {% if 'matches' in request.path %}active{% endif %}" href="{% url 'matches' %}">My Roster</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3 {% if 'events' in request.path %}active{% endif %}" href="{% url 'events' %}">Sessions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3 {% if 'groups' in request.path %}active{% endif %}" href="{% url 'groups:hub' %}">Squads</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'inbox' %}">Messages</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'my_profile' %}">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'settings' %}">Settings</a>
          </li>
          {% if user.is_staff %}
          <li class="nav-item">
            <a class="nav-link px-3" href="/admin/">Admin</a>
          </li>
          {% endif %}
          <li class="nav-item">
            <form action="{% url 'logout' %}" method="post" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-outline-cg ms-lg-3">Log Out</button>
            </form>
          </li>
          {% else %}
          <li class="nav-item">
            <a class="nav-link px-3" href="{% url 'login' %}">Log In</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-neon ms-lg-3" href="{% url 'signup' %}">Join Roster</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>

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

  <!-- Mobile Bottom Nav -->
  <div class="bottom-nav d-lg-none">
    <a href="{% url 'home' %}" class="bottom-nav-item {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
      <i class="bi bi-compass"></i>
      Explore
    </a>
    <a href="{% url 'matches' %}" class="bottom-nav-item {% if 'matches' in request.path %}active{% endif %}">
      <i class="bi bi-shield-check"></i>
      My Roster
    </a>
    <a href="{% url 'inbox' %}" class="bottom-nav-item {% if request.resolver_match.url_name == 'inbox' or request.resolver_match.url_name == 'chat_detail' %}active{% endif %}">
      <i class="bi bi-chat-left-text"></i>
      Messages
    </a>
    <a href="{% url 'events' %}" class="bottom-nav-item {% if request.resolver_match.url_name == 'events' %}active{% endif %}">
      <i class="bi bi-lightning-charge"></i>
      Sessions
    </a>
    <a href="{% url 'groups:hub' %}" class="bottom-nav-item {% if 'groups' in request.path %}active{% endif %}">
      <i class="bi bi-grid-1x2"></i>
      Squads
    </a>
    <a href="{% url 'my_profile' %}" class="bottom-nav-item {% if request.resolver_match.url_name == 'my_profile' or request.resolver_match.url_name == 'profile_detail' or request.resolver_match.url_name == 'edit_profile' %}active{% endif %}">
      <i class="bi bi-person-badge"></i>
      Profile
    </a>
  </div>

  <!-- Bootstrap 5 JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  {% block scripts %}{% endblock %}
</body>

</html>
