{% load static %}
{% load compress %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="chrome=1" http-equiv="X-UA-Compatible">
    <title>{% block head_title %}{% endblock %} Forum</title>
    <meta name="author" content="Nathan Chapman">

    <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=Montserrat:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700;1,900&family=PT+Mono&family=STIX+Two+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 

    {% compress css %}
    <link rel="stylesheet" type="text/css" href="{% static "styles/main.css" %}">
    {% endcompress %}

    <script type="module" defer src="{% static 'scripts/timezone.js' %}"></script>

    {% block head %}
    {% endblock %}
</head>
<body>

<header class="site__header">
    <h1 class="site__logo"><a href="{% url 'core:topic-list' %}">The Forum</a></h1>
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <span {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</span>
        {% endfor %}
    </div>
    {% endif %}
    <nav class="site__nav">
    {% if user.is_authenticated %}
        <menu>
            <li><a href="{% url 'account-detail' request.user.pk %}">Profile</a></li>
            <li><a href="{% url 'logout' %}">Log out</a></li>
        </menu>
    {% else %}
        <menu>
            <li><a href="{% url 'login' %}">Login</a></li>
        </menu>
    {% endif %}
    </nav>
</header>
<main>
    {% block breadcrumbs %}
    {% endblock breadcrumbs %}

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

{% endblock footer %}
</footer>
</body>
</html>
