{% extends 'base.html' %}
{% load static i18n %}
{% load socialaccount %}

{% block body %}
    <div id="app">
        <div class="loading-container">
            <div class="spinner-border text-primary loading-spinner" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    {% block appcontent %}{% endblock appcontent %}
{% endblock body %}

{% block javascript %}
    <script>
        /**
         * Initialize the topobank object if it doesn't exist yet.
         */
        var topobank = topobank || {};
    </script>
    {% if serialized_object %}
        {{ serialized_object|json_script:"object" }}
    {% endif %}
    {# Prebuilt BokehJS bundle, exposed as the global `Bokeh`. The app bundle #}
    {# references it via webpack `externals` (see webpack.config.js), so these #}
    {# must load before app.bundle.js. The version is the one pinned for #}
    {# @bokeh/bokehjs in package.json, read by `ce_ui.bokehjs`. #}
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-{{ bokehjs_version }}.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-{{ bokehjs_version }}.min.js"
            crossorigin="anonymous"></script>
    <script src="{% static 'js/app.bundle.js' %}"></script>
    <script>
        /**
         * Get messages from Django context and pass them into an array.
         */
        const messages = [];
        {% if messages %}
            {% for message in messages %}
                messages.push({
                    message: '{{ message }}',
                    level: '{{ message.level_tag }}',
                    extra_tags: '{{ message.extra_tags }}'
                });
            {% endfor %}
        {% endif %}

        const breadcrumbs = [];
        {% for breadcrumb in fixed_tabs %}
            breadcrumbs.push({
                title: '{{ breadcrumb.title }}',
                icon: '{{ breadcrumb.icon }}',
                icon_style_prefix: '{{ breadcrumb.icon_style }}',
                href: '{{ breadcrumb.href }}',
                {%  if breadcrumb.href_next %}
                    href_next: '{{ breadcrumb.href_next }}',
                {% endif %}
                {%  if breadcrumb.href_previous %}
                    href_previous: '{{ breadcrumb.href_previous }}',
                {% endif %}
                active: {{ breadcrumb.active|yesno:'true,false' }},
                login_required: {{ breadcrumb.login_required|yesno:'true,false' }},
                tooltip: '{{ breadcrumb.tooltip }}'
            });
        {% endfor %}
        {% for breadcrumb in extra_tabs %}
            breadcrumbs.push({
                title: '{{ breadcrumb.title }}',
                icon: '{{ breadcrumb.icon }}',
                icon_style_prefix: '{{ breadcrumb.icon_style }}',
                href: '{{ breadcrumb.href }}',
                {%  if breadcrumb.href_next %}
                    href_next: '{{ breadcrumb.href_next }}',
                {% endif %}
                {%  if breadcrumb.href_previous %}
                    href_previous: '{{ breadcrumb.href_previous }}',
                {% endif %}
                active: {{ breadcrumb.active|yesno:'true,false' }},
                login_required: {{ breadcrumb.login_required|yesno:'true,false' }},
                tooltip: '{{ breadcrumb.tooltip }}'
            });
        {% endfor %}

        /*
         * Properties that are globally injected into the Vue app
         */
        let appProps = {
            // Admin and login URLs
            adminUrl: '{% url 'admin:index' %}',
            loginUrl: '{% provider_login_url 'orcid' method="oauth2" %}',
            datasetListUrl: '{% url 'ce_ui:select' %}',
            // User information
            userApiUrl: '{{ request.user.get_absolute_url }}',
            userName: '{{ request.user.username }}',
            userFirstName: '{{ request.user.first_name }}',
            userLastName: '{{ request.user.last_name }}',
            userFullName: '{{ request.user.name }}',
            userOrcid: '{{ request.user.orcid_id }}',
            userIsAnonymous: {{ request.user.is_anonymous|yesno:'true,false' }},
            userIsStaff: {{ request.user.is_staff|yesno:'true,false' }},
            searchParams: new URLSearchParams(window.location.search)
        };

        /*
         * "Detail" views yield a current serialized object
         */
        {% if serialized_object %}
            appProps["object"] = JSON.parse(document.getElementById("object").textContent);
        {% endif %}

        /*
         * Properties that are only visible to the app frame component
         */
        const props = {
            // The main component to mount
            vueComponent: '{{ vue_component }}',
            // Breadcrumb navigation
            breadcrumbs: breadcrumbs,
            // Django messages
            messages: messages
        };

        topobank.app.createAppFrame('#app', '{{ csrf_token }}', appProps, props);
    </script>
{% endblock javascript %}