<!DOCTYPE html>
<html>

{% from 'macros.html' import bootstrap_icon %}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">

    <script src="{{ url_for('static', filename='dist/lib.js') }}"></script>
    <script>
        var localeLanguage = "{{ locale_language }}"
        if (!FlatpickrLanguages.hasOwnProperty(localeLanguage)) {
            localeLanguage = "en";
        }
        var flatpickrAltFormat = "Y-m-d H:i:S";
        if (!FlatpickrLanguages[localeLanguage].time_24hr) {
            var flatpickrAltFormat = "Y-m-d h:i:S K";
        }
        var flatpickrOptions = {
            enableTime: true,
            enableSeconds: true,
            time_24hr: FlatpickrLanguages[localeLanguage].time_24hr,
            dateFormat: "Z",
            altInput: true,
            altFormat: flatpickrAltFormat,
            locale: localeLanguage,
        };
    </script>

    {% block scripts %}{% endblock %}
    {% block styles %}{% endblock %}
    <title>{% block title %}Timeseer.AI{% endblock %}</title>
</head>

<body>
    <div class="d-md-flex">

        <div class="ts-nav align-self-start d-md-flex">
            <nav class="ts-side-bar text-center">
                <div class="d-flex flex-column align-items-start">
                    <div class="d-none d-md-block">
                        <a class="ts-side-bar-logo d-flex justify-content-center align-items-center"
                            href="{{ url_for('home.home_page', sourcename=source_name) }}">
                            <img src="{{ url_for('static', filename='icon.png') }}">
                        </a>
                    </div>
                    <div class="ts-side-bar-nav">
                        <a href="{{ url_for('home.home_page', sourcename=source_name) }}">
                            {{ bootstrap_icon('house-door-fill', size=16) }}
                            Home
                        </a>
                        <a href="" data-bs-toggle="modal" data-bs-target="#createApplicationModal">
                            {{ bootstrap_icon('grid-3x3-gap-fill', size=16) }}
                            Apps
                        </a>
                        <a href="{{ url_for('home.configure', sourcename=source_name) }}">
                            {{ bootstrap_icon('gear-fill', size=16) }}
                            Configure
                        </a>
                        <a href="{{ url_for('help.display_help', sourcename=source_name) }}">
                            {{ bootstrap_icon('question-circle-fill', size=16) }}
                            Help
                        </a>
                        <a href="{{ url_for('home.feedback', sourcename=source_name) }}">
                            {{ bootstrap_icon('mic-fill', size=16) }}
                            Feedback
                        </a>
                    </div>
                </div>
            </nav>

            {% block menu %}
            {% endblock %}
        </div>

        <main class="flex-grow-1 px-md-5 overflow-auto">
            <div class="container-fluid">
                {% block main %}{% endblock %}
            </div>
        </main>
        {% block sidebar_right %}
        {% endblock %}
    </div>
    {% block scripts_bottom %}{% endblock %}
    {% include 'apps-modal.html' %}
</body>

</html>
