<!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-flex">

        <div class="ts-nav align-self-start d-flex">
            <nav class="ts-side-bar text-center text-light bg-ts-dark-gray min-vh-100">
                <div class="d-flex flex-column align-items-start min-vh-100">
                    <div class="mb-auto">
                        <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>

                        {% if context_score is defined and context_score is not none %}
                        <div class="mx-2 py-2 ts-side-bar-section" data-e2e="context-score">
                            <svg viewBox="0 0 100 100">
                                <circle transform="rotate(-90, 50, 50)" cx="50" cy="50" r="45" fill="transparent"
                                    stroke-width="5" stroke-opacity="0.2" style="stroke: var(--bs-primary)" />
                                <circle transform="rotate(-90, 50, 50)" cx="50" cy="50" r="45" fill="transparent"
                                    stroke-width="5" stroke-dasharray="{{ (3.1415 * 45 * 2) * context_score / 100 }} {{ (3.1415 * 45 * 2) }}" style="stroke: var(--bs-primary)" />
                                <text style="fill: var(--bs-secondary)" x="50%" y="50%" text-anchor="middle"
                                    dominant-baseline="central" font-size="1.5rem">{{ context_score }}%</text>
                            </svg>
                        </div>
                        {% endif %}
                    </div>

                    <div class="ts-side-bar-nav">
                        <a href="" data-bs-toggle="modal" data-bs-target="#createApplicationModal">
                            {{ bootstrap_icon('app', 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('bug-fill', size=16) }}
                            Feedback
                        </a>
                    </div>
                </div>
            </nav>

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

        <main class="flex-grow-1 px-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>
