{% extends 'allianceauth/base-bs5.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block page_title %}
    {{ page_title }}
{% endblock page_title %}

{% block header_nav_user_character_control %}
{% endblock header_nav_user_character_control %}

{% get_current_language as LANGUAGE_CODE %}
{% block content %}
    <div id="root" lang="{{ LANGUAGE_CODE }}">
        <div id="app">
            <div id="loading-div" class="flex-container-main ">
                <div class="text-center">
                    <div>
                        <div class="lds-dual-ring-main"></div>
                    </div>
                    <h3>Loading Page</h3>
                    <p>Please Wait</p>
                </div>
            </div>
            <div id="error-div" class="flex-container-main d-none">
                <div class="text-center">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg"
                            width="100"
                            height="100"
                            fill="currentColor"
                            class="bi bi-exclamation-triangle error-anim-main"
                            viewBox="0 0 16 16">
                            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" />
                            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z" />
                        </svg>
                    </div>
                    <h3>Error Loading JavaScript</h3>
                    <p>Check Browser Console for Logs</p>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_javascript %}
    <script type="text/javascript">
        var BASE_URL = "/static/{{app_name}}/";

        function loadCss(cssFiles) {
            (cssFiles || []).forEach(function(css) {
                console.log("Loading CSS: ", css);
                $("<link />").appendTo("head").attr({
                    type: "text/css",
                    rel: "stylesheet",
                    href: css,
                });
            });
        }

        function loadScript(scriptUrl) {
            console.log("Loading JS: ", scriptUrl);
            var tag = document.createElement("script");
            tag.src = scriptUrl;
            tag.type = "module"; // you can set "module" if it's ESModules
            document.getElementsByTagName("head")[0].appendChild(tag);
        }

        $.ajax(BASE_URL + "manifest.json?version={{version}}", {
            dataType: "json",
            success: function(manifest) {
                if (!manifest) {
                    return showLoaderError();
                }

                // Option A) If we detect the “new format”:
                if (manifest["index.html"]) {
                    // => handle the "example" manifest style
                    const indexEntry = manifest["index.html"];
                    const imports = (indexEntry.imports || []).map(f => BASE_URL + manifest[f].file);
                    const cssFiles = (indexEntry.css || []).map(f => "/" + f);
                    const mainJs = BASE_URL + indexEntry.file;

                    loadCss(cssFiles);
                    imports.forEach(loadScript);
                    loadScript(mainJs);

                } else if (manifest.files && manifest.entrypoints) {
                    let cssFiles = [];
                    let jsFiles = [];

                    manifest.entrypoints.forEach((entry) => {
                        if (entry.endsWith(".css")) {
                            cssFiles.push(BASE_URL + entry);
                        } else if (entry.endsWith(".js")) {
                            jsFiles.push(BASE_URL + entry);
                        }
                    });
                    loadCss(cssFiles);
                    jsFiles.forEach(loadScript);
                } else {
                    showLoaderError();
                }
            },
            error: function() {
                showLoaderError();
            },
            cache: false
        });

        function showLoaderError() {
            console.log("Unable to load react app, manifest file not accessible or corrupted");
            const error_div = document.querySelector("#error-div");
            const loading_div = document.querySelector("#loading-div");
            error_div.classList.toggle("d-none");
            loading_div.classList.toggle("d-none");
        }
    </script>
{% endblock extra_javascript %}