{% load static %}
{% load compress %}
{% load i18n %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>{% block title %}{{ branding }}{% endblock %}</title>
    {% if favicon %}
        <link href="{% static favicon %}" rel="icon">
    {% endif %}
    {% if favicon_package %}
        <link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon_package/apple-touch-icon.png' %}">
        <link rel="manifest" href="{% static 'favicon_package/site.webmanifest' %}">
        <link rel="mask-icon" href="{% static 'favicon_package/safari-pinned-tab.svg' %}" color="{{ primary_color }}">
        <meta name="apple-mobile-web-app-title" content="{% if branding %}{{ branding }}{% else %}}c3nav{% endif %}">
        <meta name="application-name" content="{% if branding %}{{ branding }}{% else %}}c3nav{% endif %}">
        <meta name="msapplication-TileColor" content="{{ primary_color }}">
        <meta name="msapplication-config" content="{% static 'favicon_package/browserconfig.xml' %}">
    {% endif %}
    <meta name="theme-color" media="(prefers-color-scheme: light)" id="theme-color-meta-light"
          content="{{ active_theme.theme_color_light }}"/>
    <meta name="theme-color" media="(prefers-color-scheme: dark)" id="theme-color-meta-dark"
          content="{{ active_theme.theme_color_dark }}"/>
    {% if randomize_primary_color %}
        <style id="c3nav-theme-randomized-primary-color">
            :root {
                --color-primary: {{ primary_color }};
                --color-logo: {{ primary_color }};
            }
        </style>
    {% endif %}
    <style id="c3nav-theme-css-vars">{{ active_theme.css_vars | striptags | safe }}</style>
    {{ themes|json_script:"c3nav-themes" }}
    {{ active_theme_id|json_script:"c3nav-active-theme" }}
    {% compress css %}
        <link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
        <link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
        <link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
        <link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet">
        <link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
    {% endcompress %}
    <style id="c3nav-theme-css-extra">{{ active_theme.css_extra | striptags | safe }}</style>
    {% block head %}
    {% endblock %}
    {% if header_logo and header_logo_mask_mode %}
        <style>
        @supports (mask-mode: {{ header_logo_mask_mode }}) and (mask-repeat: no-repeat) and (mask-size: contain) {
            #header-logo-link {
                mask-image: url('{% static header_logo %}');
                mask-mode: {{ header_logo_mask_mode }};
                mask-repeat: no-repeat;
                mask-size: contain;
                background: var(--color-logo);
            }

            #header-logo-link > img {
                visibility: hidden;
            }
        }
        </style>
    {% endif %}
</head>
<body data-user-data="{{ user_data_json }}">
{% if not embed and not request.mobileclient %}
    <header>
        <h1><a href="{% block header_title_url %}/{% endblock %}" id="header-logo-link">
            {% if header_logo %}<img src="{% static header_logo %}" alt="{% if branding %}{{ branding }}{% else %}}c3nav{% endif %}">{% else %}{% if branding %}{{ branding }}{% else %}}c3nav{% endif %} {% endif %}{% spaceless %}
        {% endspaceless %}{% block header_title %}{% endblock %}
        </a></h1>
        <a href="/account/" id="user">
            <span>{{ request.user_data.title }}</span>
            <small>{% if request.user_data.subtitle %}{{ request.user_data.subtitle }}{% endif %}</small>
        </a>
    </header>
{% endif %}
{% block content %}
{% endblock %}
</body>
</html>
