{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title_prefix %}{% endblock %}{{ punkweb_bb.settings.SITE_TITLE|default:"PunkwebBB" }}</title>
  <meta property="og:title" content="{% block og_title_prefix %}{% endblock %}{{ punkweb_bb.settings.SITE_TITLE|default:"PunkwebBB" }}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{ request.build_absolute_uri }}" />
  {% if punkweb_bb.settings.OG_IMAGE %}
  <meta property="og:image" content="{{ punkweb_bb.settings.OG_IMAGE }}" />
  {% endif %}
  <link rel="icon" href="{% static punkweb_bb.settings.FAVICON %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/vendor/open-color.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/vendor/prism.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/css/defaults.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/css/variables.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/css/typography.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/css/punkweb.css' %}" />
  <link rel="stylesheet" href="{% static 'punkweb_bb/css/punkweb-modal.css' %}" />
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
  />
  {% block extra_head %}{% endblock %}
</head>

<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
  <div class="layout">
    <header>
      <nav class="nav">
        <div class="nav__upper">
          <div class="container">
            <div class="nav__upper__content">
              {% if request.user.is_staff %}
              <div class="nav__upper__links">
                <a class="nav__upper__link" href="{% url 'admin:index' %}">Admin</a>
              </div>
              {% endif %}
              <div class="nav__spacer"></div>
              {% if request.user.is_authenticated %}
              <div class="nav__upper__links">
                <a class="nav__upper__link" href="{% url 'punkweb_bb:profile' request.user.id %}">
                  Profile
                </a>
                <a class="nav__upper__link" href="{% url 'punkweb_bb:settings' %}">
                  Settings
                </a>
                <a class="nav__upper__link" href="{% url 'punkweb_bb:logout' %}">
                  Logout
                </a>
              </div>
              {% else %}
              <div class="nav__upper__links">
                <a class="nav__upper__link" href="{% url 'punkweb_bb:signup' %}">
                  Sign Up
                </a>
                <a class="nav__upper__link" href="{% url 'punkweb_bb:login' %}">
                  Login
                </a>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="nav__main">
          <div class="container">
            <div class="nav__main__content">
              <a class="nav__title" href="{% url 'punkweb_bb:index' %}">
                {{ punkweb_bb.settings.SITE_NAME|default:"PUNKWEB"}}
              </a>
              <a class="nav__link" href="{% url 'punkweb_bb:index' %}">
                Forum
              </a>
              <a class="nav__link" href="{% url 'punkweb_bb:members' %}">
                Members
              </a>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <main class="main">
      <div class="container">
        {% block content %}
        {% endblock content %}
      </div>
    </main>
    <footer>
      <div class="footer">
        <div class="container">
          <div class="footer__content">
            <div>Powered by <a href="https://github.com/Punkweb/PunkwebBB" target="_blank">PunkwebBB</a></div>
            <div><a href="{% url 'punkweb_bb:bbcode' %}">BBCode Reference</a></div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <div id="modal-portal"></div>
  <script src="{% static 'punkweb_bb/vendor/htmx-1.9.4.min.js' %}"></script>
  <script src="{% static 'punkweb_bb/vendor/jquery-3.7.0.min.js' %}"></script>
  <script src="{% static 'punkweb_bb/vendor/prism.js' %}"></script>
  <script src="{% static 'punkweb_bb/js/punkweb-modal.js' %}"></script>
  {% block extra_script %}{% endblock %}
</body>

</html>