{# Copyright 2020 Michael Thies <mail@mhthies.de>
 #
 # Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
 # the License. You may obtain a copy of the License at
 #
 #     http://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 # specific language governing permissions and limitations under the License.
 #}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="{{root_url}}/static/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="{{root_url}}/static/apple-touch-icon.png" />

    <title>{{ html_title }}</title>

    {% for css_file in css_files %}
        <link rel="stylesheet" type="text/css" href="{{root_url}}{{ css_file }}" />
    {% endfor %}
    <script>
        const shcRootURL = "{{root_url|safe}}";
        const shcServerToken = {{ server_token }};
    </script>
    {% for js_file in js_files %}
        <script src="{{root_url}}{{ js_file }}"></script>
    {% endfor %}
</head>
<body>
    {% if menu %}
        <div class="ui sidebar inverted vertical menu main-menu">
            {% for label, icon, link in menu %}
                {% if link is string %}
                    <a class="item" href="{{ root_url }}/page/{{ link }}/">
                        {% if icon %}<i class="{{ icon }} icon"></i>{% endif %}
                        {{ label }}
                    </a>
                {% else %}
                    <div class="item">
                        {% if icon %}<i class="{{ icon }} icon"></i>{% endif %}
                        <div class="header">{{ label }}</div>
                        <div class="menu">
                            {% for sub_label, sub_icon, sub_link in link %}
                                <a class="item" href="{{ root_url }}/page/{{ sub_link }}/">
                                    {% if sub_icon %}<i class="{{ sub_icon }} icon"></i>{% endif %}
                                    {{ sub_label }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    <div class="pusher">
        {% if menu %}
            <div class="ui large top inverted fixed menu main-menu">
                <div class="ui container">
                    {% for label, icon, link in menu %}
                        {% if link is string %}
                            <a class="mobile hidden item" href="{{ root_url }}/page/{{ link }}/">
                                {% if icon %}<i class="{{ icon }} icon"></i>{% endif %}
                                {{ label }}
                            </a>
                        {% else %}
                            <div class="mobile hidden ui dropdown item">
                                {% if icon %}<i class="{{ icon }} icon"></i>{% endif %}
                                {{ label }}
                                <i class="dropdown icon"></i>
                                <div class="menu">
                                    {% for sub_label, sub_icon, sub_link in link %}
                                        <a class="item" href="{{ root_url }}/page/{{ sub_link }}/">
                                            {% if sub_icon %}<i class="{{ sub_icon }} icon"></i>{% endif %}
                                            {{ sub_label }}
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                    <a id="mobile_item" class="mobile only item"><i class="bars icon"></i></a>
                </div>
            </div>
        {% endif %}
        <div class="ui container">
            {% block content %}{% endblock %}
        </div>
    </div>
</body>
</html>
