{% load static compress bread_tags %}
<!DOCTYPE html>
<html class="no-js" lang="en">
    {% with PLATFORMNAME|default:"bread" as PLATFORMNAME %}
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="{% block page_description %}{% endblock%}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>{{ pagetitle|default:PLATFORMNAME|striptags }} | {{ PLATFORMNAME|striptags }}</title>
        {% block favicon %}<link rel="shortcut icon" href="{% static "logo.png" %}"/>{% endblock %}

        {% compress css %}
        <link rel="stylesheet" type="text/css" href="{% if debug %}{% static "css/bread-main.css" %}{% else %}{% static "css/bread-main.min.css" %}{% endif %}"  media="all"/>
            <link rel="stylesheet" type="text/css" href="{% static "djangoql/css/completion.css" %}" />
        {% endcompress %}
    </head>

    <body>
        {% render_layout headerlayout %}

        {% if user.is_authenticated %}
            {% include "bread/components/side-nav.html" %}
        {% endif %}

        <div style="position: fixed; right: 0; z-index: 999">
            {% display_messages messages %}
        </div>

        <div class="bx--content">
            {% render_layout layout %}
        </div>


        {% compress js %}
        <script src="{% static "js/main.js" %}"></script>
        <script src="{% static "js/bliss.min.js" %}"></script>
        <script src="{% static "js/htmx.min.js" %}"></script>
        <script src="{% static "design/carbon_design/js/carbon-components.js" %}"></script>
        <script src="{% static "djangoql/js/completion.js" %}"></script>
        <script>
            // TODO: this will very likely be rather slow. We should instead add watch only to dynamic parts of pages.
            // However, please profile before starting to optimize.
            CarbonComponents.watch(document);
        </script>
        {% endcompress js %}
    </body>
    {% endwith %}
</html>
