{% load static %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}TrustForge{% endblock %}</title>
  <meta name="description" content="{% block meta_description %}{{ project_description|default:'TrustForge turns completed jobs into visual proof, testimonials, and conversion assets for service businesses.' }}{% endblock %}">
  <meta name="author" content="TrustForge">
  <meta name="keywords" content="proof cards, service business reviews, trust marketing, contractor testimonials, local service SaaS">
  <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&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  {% block head %}{% endblock %}
</head>
<body class="trustforge-body">
  <div class="tf-background-glow tf-background-glow-1"></div>
  <div class="tf-background-glow tf-background-glow-2"></div>

  <header class="tf-site-header sticky-top">
    <nav class="navbar navbar-expand-lg tf-navbar">
      <div class="container py-2">
        <a class="navbar-brand tf-brand" href="{% url 'home' %}">
          <span class="tf-brand-mark">TF</span>
          <span>TrustForge</span>
        </a>
        <button class="navbar-toggler tf-nav-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#tfNav" aria-controls="tfNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="tfNav">
          <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
            {% if request.user.is_authenticated %}
              {% if current_membership %}
                <li class="nav-item d-none d-lg-flex">
                  <div class="tf-workspace-chip">
                    <span class="tf-workspace-chip-mark">{{ current_membership.business.initials }}</span>
                    <span>
                      <strong>{{ current_membership.business.name }}</strong>
                      <small>{{ current_membership.get_role_display }}</small>
                    </span>
                  </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'jobs_list' %}">Jobs</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'proof_cards_list' %}">Proof Cards</a></li>
                <li class="nav-item ms-lg-2"><a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Complete a job</a></li>
              {% else %}
                <li class="nav-item"><a class="nav-link" href="{% url 'business_onboarding' %}">Create workspace</a></li>
              {% endif %}
              <li class="nav-item dropdown ms-lg-2">
                <button class="btn tf-user-menu dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <span class="tf-user-menu-label">{{ request.user.first_name|default:request.user.email|truncatechars:18 }}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end tf-user-dropdown">
                  {% if current_membership %}
                    <li class="dropdown-item-text tf-dropdown-label">
                      <strong>{{ current_membership.business.name }}</strong>
                      <span>{{ current_membership.get_role_display }}</span>
                    </li>
                    <li><a class="dropdown-item" href="{% url 'dashboard' %}">Workspace dashboard</a></li>
                    {% if current_membership.can_manage_workspace %}
                      <li><a class="dropdown-item" href="{% url 'workspace_settings' %}">Workspace settings</a></li>
                    {% endif %}
                  {% else %}
                    <li><a class="dropdown-item" href="{% url 'business_onboarding' %}">Create workspace</a></li>
                  {% endif %}
                  <li><a class="dropdown-item" href="{% url 'profile_settings' %}">Profile &amp; settings</a></li>
                  <li><a class="dropdown-item" href="/admin/">Admin</a></li>
                  {% if user_memberships|length > 1 %}
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-item-text tf-dropdown-section">Switch workspace</li>
                    {% for membership in user_memberships %}
                      <li>
                        <form method="post" action="{% url 'switch_workspace' membership.business_id %}" class="px-2 pb-2">
                          {% csrf_token %}
                          <input type="hidden" name="next" value="{{ request.path }}">
                          <button type="submit" class="dropdown-item tf-workspace-switch{% if current_membership and membership.business_id == current_membership.business_id %} active{% endif %}">
                            {{ membership.business.name }}
                            <small>{{ membership.get_role_display }}</small>
                          </button>
                        </form>
                      </li>
                    {% endfor %}
                  {% endif %}
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <form method="post" action="{% url 'logout' %}" class="px-2 pb-2">
                      {% csrf_token %}
                      <button type="submit" class="dropdown-item tf-logout-link">Log out</button>
                    </form>
                  </li>
                </ul>
              </li>
            {% else %}
              <li class="nav-item"><a class="nav-link" href="{% url 'login' %}">Login</a></li>
              <li class="nav-item ms-lg-2"><a class="btn tf-btn tf-btn-primary" href="{% url 'signup' %}">Get Started</a></li>
            {% endif %}
          </ul>
        </div>
      </div>
    </nav>
  </header>

  {% if messages %}
  <div class="container pt-4">
    {% for message in messages %}
    <div class="alert tf-alert alert-dismissible fade show" role="alert">
      {{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

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

  <footer class="tf-footer py-5">
    <div class="container d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-lg-center">
      <div>
        <div class="tf-footer-brand">TrustForge</div>
        <p class="mb-0 text-secondary-emphasis">Proof &gt; reviews for home service businesses.</p>
      </div>
      <div class="small text-secondary-emphasis">Built for contractors, HVAC, roofing, plumbing, electrical, landscaping, and local service teams.</div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
