{% 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 %}Postiz Native Setup Studio{% endblock %}</title>
  <meta name="description" content="{% block meta_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
  {% if project_image_url %}
  <meta property="og:image" content="{{ project_image_url }}">
  <meta property="twitter:image" content="{{ project_image_url }}">
  {% endif %}
  <meta property="og:title" content="{% block og_title %}Postiz Native Setup Studio{% endblock %}">
  <meta property="og:description" content="{% block og_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
  <meta property="twitter:title" content="{% block twitter_title %}Postiz Native Setup Studio{% endblock %}">
  <meta property="twitter:description" content="{% block twitter_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
  <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">
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  {% block head %}{% endblock %}
</head>

<body class="{% block body_class %}app-shell{% endblock %}">
  <div class="bg-orb bg-orb-one"></div>
  <div class="bg-orb bg-orb-two"></div>
  <header class="site-header">
    <nav class="navbar navbar-expand-lg navbar-dark py-3">
      <div class="container-xxl">
        <a class="navbar-brand d-flex align-items-center gap-3" href="{% url 'home' %}">
          <span class="brand-mark">P</span>
          <span>
            <span class="brand-title">Postiz Native Setup Studio</span>
            <span class="brand-subtitle d-block">Hosted dev workflow for this VM</span>
          </span>
        </a>
        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav" aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="primaryNav">
          <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
            <li class="nav-item"><a class="nav-link" href="{% url 'home' %}">Overview</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'brief_list' %}">Install briefs</a></li>
            <li class="nav-item"><a class="nav-link" href="{% url 'brief_create' %}">New brief</a></li>
            <li class="nav-item ms-lg-2"><a class="btn btn-highlight" href="/admin/">Admin</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main class="page-shell pb-5">
    <div class="container-xxl">
      {% if messages %}
      <div class="toast-stack">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags|default:'info' }} glass-alert" role="alert">{{ message }}</div>
        {% endfor %}
      </div>
      {% endif %}
      {% block content %}{% endblock %}
    </div>
  </main>

  <footer class="site-footer py-4">
    <div class="container-xxl d-flex flex-column flex-lg-row justify-content-between gap-2 text-white-50 small">
      <span>{{ project_name }} · Django {{ django_version }} · Python {{ python_version }}</span>
      <span>Last render: {{ current_time|date:"Y-m-d H:i" }} UTC</span>
    </div>
  </footer>

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

</html>
