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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}CommonGround{% 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' %}">
  {% 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 fs-4 d-flex align-items-center" href="/">
        <img src="{% static 'core/images/logo.png' %}" alt="CommonGround" class="me-2" style="height: 24px;">
        <span class="fw-semibold ls-1" style="font-size: 1.25rem;">CommonGround</span>
      </a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </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' %}">Teammates</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 Teammates</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">
            <a class="btn btn-outline-cg ms-lg-3" href="{% url 'logout' %}">Log Out</a>
          </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-primary-cg ms-lg-3" href="{% url 'signup' %}">Join Community</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>
      Teammates
    </a>
    <a href="{% url 'matches' %}" class="bottom-nav-item {% if 'matches' in request.path %}active{% endif %}">
      <i class="bi bi-people"></i>
      Teammates
    </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-dots"></i>
      Messages
    </a>
    <a href="{% url 'events' %}" class="bottom-nav-item {% if request.resolver_match.url_name == 'events' %}active{% endif %}">
      <i class="bi bi-calendar-event"></i>
      Sessions
    </a>
    <a href="{% url 'groups:hub' %}" class="bottom-nav-item {% if 'groups' in request.path %}active{% endif %}">
      <i class="bi bi-grid"></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"></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>
