<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Gatsby{% endblock %}</title>
  {% if project_description %}
  <meta name="description" content="{{ project_description }}">
  <meta property="og:description" content="{{ project_description }}">
  <meta property="twitter:description" content="{{ project_description }}">
  {% endif %}
  {% if project_image_url %}
  <meta property="og:image" content="{{ project_image_url }}">
  <meta property="twitter:image" content="{{ project_image_url }}">
  {% endif %}
  {% load static %}
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  {% block extra_css %}{% endblock %}
  <style>
    body { font-family: 'Inter', sans-serif; }
    .navbar-brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -1px; }
    .nav-link { color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; }
    .nav-link:hover { color: var(--text-primary); }
    .navbar { padding: 16px 0; }
    .nav-icon { margin-right: 5px; }
    .nav-active { color: var(--text-primary) !important; font-weight: 700 !important; }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg sticky-top">
    <div class="container">
      <a class="navbar-brand text-white" href="{% url 'home' %}">GATSBY</a>
      <button class="navbar-toggler" 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">
          {% if user.is_authenticated %}
            <li class="nav-item">
                <a class="nav-link px-3 {% if request.resolver_match.url_name == 'discover' %}nav-active{% endif %}" href="{% url 'discover' %}">
                    <i class="bi bi-compass nav-icon"></i>Discover
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3 {% if request.resolver_match.url_name == 'partners' %}nav-active{% endif %}" href="{% url 'partners' %}">
                    <i class="bi bi-people nav-icon"></i>Partners
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3 {% if request.resolver_match.url_name == 'messages' %}nav-active{% endif %}" href="{% url 'messages' %}">
                    <i class="bi bi-chat-left-dots nav-icon"></i>Messages
                </a>
            </li>
            <li class="nav-item me-2">
                <a class="nav-link px-3 {% if request.resolver_match.url_name == 'portfolio' %}nav-active{% endif %}" href="{% url 'portfolio' %}">
                    <i class="bi bi-grid-fill nav-icon"></i>Portfolio
                </a>
            </li>
            
            {% if user.profile.role == 'FOUNDER' %}
            <li class="nav-item">
                <a class="btn btn-outline-primary rounded-pill btn-sm px-3 me-3" href="{% url 'post_startup' %}">
                    <i class="bi bi-plus-lg me-1"></i>Post Startup
                </a>
            </li>
            {% endif %}

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                    <div class="rounded-circle bg-dark-subtle d-inline-block text-center me-2" style="width: 32px; height: 32px; line-height: 32px;">
                        {{ user.username|first|upper }}
                    </div>
                    <span>{{ user.username }}</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end glass-card border-0 shadow-lg mt-3 p-2">
                    <li>
                        <form action="{% url 'logout' %}" method="post" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="dropdown-item text-danger rounded-3 p-2">
                                <i class="bi bi-box-arrow-right me-2"></i>Sign Out
                            </button>
                        </form>
                    </li>
                </ul>
            </li>
          {% else %}
            <li class="nav-item"><a class="nav-link px-3" href="{% url 'login' %}">Sign In</a></li>
            <li class="nav-item ms-lg-3"><a class="btn btn-primary rounded-pill px-4" href="{% url 'signup' %}">Get Started</a></li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    {% block content %}{% endblock %}
  </div>

  <footer class="py-5 mt-5">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h5 class="text-white mb-4">Gatsby</h5>
          <p class="text-secondary small">Empowering the next generation of student-led startups. Built by peers, for peers.</p>
        </div>
        <div class="col-md-2 offset-md-2">
          <h6 class="text-white mb-3 text-uppercase small ls-wide">Platform</h6>
          <ul class="list-unstyled">
            <li><a href="{% url 'discover' %}" class="text-secondary text-decoration-none small">Discover</a></li>
            <li><a href="{% url 'partners' %}" class="text-secondary text-decoration-none small">Partners</a></li>
          </ul>
        </div>
        <div class="col-md-2">
          <h6 class="text-white mb-3 text-uppercase small ls-wide">Community</h6>
          <ul class="list-unstyled">
            <li><a href="#" class="text-secondary text-decoration-none small">University Leaders</a></li>
            <li><a href="#" class="text-secondary text-decoration-none small">Success Stories</a></li>
          </ul>
        </div>
        <div class="col-md-2">
          <h6 class="text-white mb-3 text-uppercase small ls-wide">Support</h6>
          <ul class="list-unstyled">
            <li><a href="#" class="text-secondary text-decoration-none small">Help Center</a></li>
            <li><a href="#" class="text-secondary text-decoration-none small">Terms</a></li>
          </ul>
        </div>
      </div>
      <div class="border-top border-secondary mt-5 pt-4 text-center">
        <p class="text-secondary small">&copy; 2026 Gatsby Platform. For university students and graduates only.</p>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
