{% load static i18n thumbnail aircox %}<!doctype html>
{% comment %}
Base website template. It displays various elements depending on context
variables.

Usefull context:
- cover: image cover
- site: current website
- model: view model or displayed `object`'s
{% endcomment %}
<html>
    <head>
    {% block head %}
        <meta charset="utf-8" />
        <meta name="application-name" content="aircox" />
        <meta name="description" content="{{ site.description }}" />
        <meta name="keywords" content="{{ site.tags }}" />
        <meta name="generator" content="Aircox" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="{% thumbnail site.favicon 32x32 crop %}" />

        {% block assets %}
        {% static "vue/vue.esm-browser.js" as vue_url %}
        <script type="importmap">
        {
            "imports": {
                "vue": "{{vue_url}}"
                {% block assets-import-map %}{% endblock %}
            }
        }
        </script>
        <script type="module" src="{{vue_url}}"></script>

        <link rel="stylesheet" type="text/css" href="{% static "fontawesome-free/css/all.min.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "aircox/index.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "aircox/public.css" %}"/>

        <script type="module" src="{% if app_js_url %}{{ app_js_url }}{% else %}{% static "aircox/public.js" %}{% endif %}"></script>
        {% endblock %}

        <title>
            {% block head-title %}
            {% if page and page.title %}{{ page.title }} &mdash;
            {% endif %}
            {{ station.name }}
            {% endblock %}
        </title>

    {% endblock %}
    </head>
    <body {% if request.is_mobile %}class="mobile"{% endif %}>
    {% block body %}
        <script id="init-script">
            window.addEventListener('load', function() {
                {% block init-scripts %}
                aircox.init(null, {hotReload:window})
                {% endblock %}
            })
        </script>
        <div id="app">
            {% block app %}
            <div class="navs">
                {% block nav %}
                <nav class="nav primary" role="navigation" aria-label="main navigation">
                    {% block primary-nav %}
                    <a class="nav-brand" href="{% url "home" %}">
                        <img src="{{ station.logo.url }}">
                    </a>
                    <a-switch class="button burger"
                        el=".nav.primary .nav-menu" group="nav"
                        aria-label="{% translate "Main menu" %}">
                    </a-switch>
                    <div class="nav-menu">
                        {% block primary-nav-menu %}
                        {% nav_items "top" css_class="nav-item" active_class="active" as items %}
                        {% for item, render in items %}
                        {{ render }}
                        {% endfor %}
                        {% endblock %}
                        {% if user.is_authenticated %}
                        {% include "./widgets/nav.html" %}
                        {% endif %}
                    </div>
                    {% endblock %}
                </nav>

                {% block secondary-nav %}{% endblock %}
                {% endblock %}
            </div>

            {% block main-container %}
            <main class="page">
            {% block main %}
                {% spaceless %}
                {% block breadcrumbs-container %}
                <div class="breadcrumbs container">
                    {% block breadcrumbs %}{% endblock %}
                </div>
                {% endblock %}
                {% endspaceless %}

                {% block header-container %}
                <header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
                    {% block header %}
                    {% spaceless %}
                    <figure class="header-cover">
                        {% block header-cover %}
                        {% if cover %}
                        <img src="{{ cover }}" ref="cover" class="cover">
                        {% endif %}
                        {% endblock %}
                    </figure>
                    {% endspaceless %}
                    <div class="headings preview-card-headings">
                    {% block headings %}
                    <div>
                        {% block title-container %}
                        <h1 class="title is-1 {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
                        {% endblock %}
                    </div>
                    <div>
                        {% spaceless %}
                        <span class="subtitle is-2">
                        {% block subtitle %}
                        {% if subtitle %}
                            {{ subtitle }}
                        {% endif %}
                        {% endblock %}
                        </span>
                        {% endspaceless %}
                    </div>
                    {% endblock %}
                    </div>
                {% endblock %}
                </header>
                {% endblock %}

                {% block content-container %}
                {% if page and page.content %}
                <section class="container no-reset content page-content">
                    {% block content %}
                    {{ page.content|safe }}
                    {% endblock %}
                </section>
                {% endif %}
                {% endblock %}
            {% endblock %}
            </main>
            {% endblock %}

            {% block footer-container %}
            <footer class="page-footer">
                {% block footer %}
                {% comment %}
                {% nav_items "footer" css_class="nav-item" active_class="active" as items %}
                {% for item, render in items %}
                {{ render }}
                {% endfor %}
                {% endcomment %}
                {% endblock %}

                {% if request.station and request.station.legal_label %}
                {{ request.station.legal_label }} &mdash;
                {% endif %}
            </footer>
            {% endblock %}

        </div>
        {% block player-container %}
        <div id="player">{% include "aircox/widgets/player.html" %}</div>
        {% endblock %}

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