{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% block page_title %}{{page_title}}{% endblock %}
{% block extra_css %}
<style>
    .flex-container-main {
        margin-top: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .spinner-size-main {
        height: 30px;
        width: 30px;
        margin: 200px;
    }

    @keyframes shake-main {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }

        20%,
        80% {
            transform: translate3d(2px, 0, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(-4px, 0, 0);
        }

        40%,
        60% {
            transform: translate3d(4px, 0, 0);
        }
    }

    .error-anim-main {
        animation: shake-main 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation-iteration-count: infinite;
    }

    @keyframes updown-main {
        10%,
        90% {
            transform: translate3d(0, -2px, 0);
        }

        20%,
        80% {
            transform: translate3d(0, 2px, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(0, -4px, 0);
        }

        40%,
        60% {
            transform: translate3d(0, 4px, 0);
        }
    }

    .arrow-anim-main {
        animation: updown-main 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation-iteration-count: infinite;
    }

    .lds-dual-ring-main {
        display: inline-block;
        width: 80px;
        height: 80px;
    }
    .lds-dual-ring-main:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid currentColor ;
        border-color: currentColor  transparent currentColor  transparent;
        animation: lds-dual-ring-main 1.2s linear infinite;
    }
    @keyframes lds-dual-ring-main {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
{% endblock %}
{% block extra_javascript %}
<script type="text/javascript">
    var BASE_URL = '/static/{{app_name}}/bs3/';

    function loadCss (cssFiles) {
        cssFiles.forEach(function (css) {
            console.log("Loading: ", css)

            $('<link>')
                .appendTo('body')
                .attr({
                    type: 'text/css',
                    rel: 'stylesheet',
                    href: css,
                });
        });
    }

    function loadNextScript (scripts) {
        if (!scripts.length) { return; }
        var script = scripts.shift();
        console.log("Loading: ", script)
        var tag = document.createElement("script");
        tag.src = script;
        tag.type = "module";
        document.getElementsByTagName("head")[0].appendChild(tag);

        // $.getScript(script, {
        //    attrs: { type: "module" },
        //    success: function () { loadNextScript(scripts) },
        //})
    }

    $.ajax(BASE_URL + 'manifest.json?version={{version}}', {
        dataType: "json",
        success : function (data, textStatus, jqXHR) {

            if (data) {
                var imports = data["index.html"].imports.map(function (file) {
                    return BASE_URL +data[file].file;
                });
                var scripts = [BASE_URL + data["index.html"].file]
                var cssFiles = data["index.html"].css.map(function (file) {
                            return BASE_URL +file;
                        });

                loadCss(cssFiles);
                loadNextScript(imports);
                loadNextScript(scripts);
            }
        },
        error: function () {
            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('hide');
            loading_div.classList.toggle('hide');
        },
        cache: false
    })

</script>
{% endblock extra_javascript %}

{% block content %}
<div id="root">
    <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>{% translate "Loading Page" %}</h3>
              <p>{% translate "Please Wait" %}</p>
            </div>
          </div>
        <div id="error-div" class="flex-container-main hide">
            <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>{% translate "Error Loading JavaScript" %}</h3>
              <p>{% translate "Check Browser Console for Logs" %}</p>
              <p></p>
            </div>
          </div>
      </div>
</div>
{% endblock content %}