{% load statici18n %}
{% load i18n %}
{% load static %}
{% load compress %}


<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ephios - {% block title %} ephios {% endblock %}</title>
    <link rel="shortcut icon" type="image/x-icon" href="{% static "ephios/img/ephios-symbol-red.svg" %}">

    <link rel="manifest" href="/manifest.json">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="ephios">

    <!-- Chrome for Android theme color -->
    <meta name="theme-color" content="#ff033f">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="ephios">
    <meta name="apple-mobile-web-app-status-bar-style" content="#fff">

    {% for icon in PWA_APP_ICONS %}
        <link rel="apple-touch-icon" href="{{ icon.src }}" sizes="{{ icon.sizes }}">
    {% endfor %}

    {% for splash in PWA_APP_SPLASH_SCREEN %}
        <link href="{{ splash.src }}" media="{{ splash.media }}" rel="apple-touch-startup-image"/>
    {% endfor %}

    <!-- Tile for Win8 -->
    <meta name="msapplication-TileColor" content="#fff">
    {% with PWA_APP_ICONS|last as icon %}
        <meta name="msapplication-TileImage" content="{{ icon.src }}">
        <link rel="icon" sizes="{{ icon.sizes }}" href="{{ icon.src }}">
    {% endwith %}

    {% compress css %}
        <link type="text/x-scss" href="{% static 'ephios/scss/main.scss' %}" rel="stylesheet" media="screen">
        <link type="text/css" media="screen" rel="stylesheet" href="{% static "fontawesome/css/all.css" %}">
        <link type="text/css" media="screen" rel="stylesheet" href="{% static "select2/css/select2.min.css" %}">
        <link type="text/css" media="screen" rel="stylesheet"
              href="{% static "select2/css/select2-bootstrap5.min.css" %}">
        {% block css %}{% endblock %}
    {% endcompress %}

    {# as of 2021-06-14, the statici18n tag misbehaves with compression when 500 errors occur #}
    <script type="text/javascript" src="{% statici18n LANGUAGE_CODE %}"></script>
    {% compress js %}
        <script type="text/javascript" src="{% static "jquery/js/jquery-3.5.1.min.js" %}"></script>
        <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.bundle.min.js" %}"></script>
        <script type="text/javascript" src="{% static "select2/js/select2.js" %}"></script>
        <script type="text/javascript" src="{% static "django_select2/django_select2.js" %}"></script>
        <script type="text/javascript" src="{% static "select2/js/i18n/"|add:LANGUAGE_CODE|add:".js" %}"></script>
        <script type="text/javascript" src="{% static "ephios/js/formset/formset.js" %}"></script>
        <script type="text/javascript" src="{% static "ephios/js/main.js" %}"></script>
        {% block javascript %}{% endblock %}
    {% endcompress %}
    {% block html_head %}
    {% endblock %}
</head>

<body>
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
        <div class="container">
            <a class="navbar-brand" href="/"><img src="{% static "ephios/img/ephios-text-black.png" %}"
                                                  alt="ephios"
                                                  class="d-inline-block" width="75"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                {% if user.is_authenticated %}
                    <ul class="navbar-nav me-auto">
                        {% with url_name=request.resolver_match.url_name %}
                            <li class="nav-item {% if url_name == "index" %}active{% endif %}">
                                <a class="nav-link" href="{% url "core:index" %}">{% trans "Home" %}</a>
                            </li>
                            <li class="nav-item {% if url_name == "event_list" %}active{% endif %}">
                                <a class="nav-link"
                                   href="{% url "core:event_list" %}">{% trans "Events" %}</a>
                            </li>
                            {% if perms.core.view_past_event %}
                                <li class="nav-item {% if url_name == "event_list_past" %}active{% endif %}">
                                    <a class="nav-link"
                                       href="{% url "core:event_list_past" %}">{% trans "Past events" %}</a>
                                </li>
                            {% endif %}
                            {% if perms.core.view_userprofile %}
                                <li class="nav-item {% if url_name == "userprofile_list" %}active{% endif %}">
                                    <a class="nav-link"
                                       href="{% url "core:userprofile_list" %}">{% trans "Users" %}</a>
                                </li>
                            {% endif %}
                            {% if perms.auth.view_group %}
                                <li class="nav-item {% if url_name == "group_list" %}active{% endif %}">
                                    <a class="nav-link"
                                       href="{% url "core:group_list" %}">{% trans "Groups" %}
                                    </a>
                                </li>
                            {% endif %}
                        {% endwith %}
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAccount" role="button"
                               data-bs-toggle="dropdown" aria-expanded="false">
                                {{ user.get_full_name }}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownAccount">
                                {% if user.is_staff %}
                                    <a class="dropdown-item"
                                       href="{% url "core:settings_general" %}">{% trans "Administration" %}</a>
                                    <div class="dropdown-divider"></div>
                                {% endif %}
                                <a class="dropdown-item"
                                   href="{% url "core:profile" %}">{% trans "Profile" %}</a>
                                <a class="dropdown-item"
                                   href="{% url "core:profile_notifications" %}">{% trans "Notifications" %}</a>
                                <a class="dropdown-item"
                                   href="{% url "password_change" %}">{% trans "Change password" %}</a>
                                <a class="dropdown-item" href="{% url "logout" %}">{% trans "Logout" %}</a>
                            </div>
                        </li>
                    </ul>
                {% endif %}
            </div>
        </div>
    </nav>
    <div id="unloading-spinner" class="d-none">
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</header>
<div class="container container-main pt-3">
    <main class="row blur-on-unload">
        <div class="col-md-12">
            <div id="messages">
                {% for message in messages %}
                    <div class="alert {{ message.tags }} alert-dismissible" role="alert">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        {{ message }}
                    </div>
                {% endfor %}
            </div>
            {% block content %}{% endblock %}
        </div>
    </main>
    <footer class="row blur-on-unload mt-2">
        <div class="col-md-12 text-center">
            <small>
                {% for label, url in footer.items %}
                    <a href="{{ url }}">{{ label }}</a> ·
                {% endfor %}
                <span class="text-muted">
                    {% blocktranslate with brand='<a href="https://ephios.de/" rel="noreferrer" target="_blank">ephios</a>' %}
                        powered by {{ brand }}
                    {% endblocktranslate %}
                    <samp>{{ ephios_version|default_if_none:"" }}</samp>
                </span>
            </small>
        </div>
    </footer>
</div>
</body>
</html>
