{% extends "allianceauth/base.html" %}
{% load i18n %}
{% load invoices %}
{% block page_title %}
    {% invoice_app_name %}
{% endblock page_title %}
{% 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 extra_css %}
{% block extra_javascript %}
    <script type="text/javascript">
        var BASE_URL = '/static/{{app_name}}/';

        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 %}
    <br />
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                    <span class="sr-only">{% translate "Toggle navigation" %}</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'invoices:r_list' %}">{% invoice_app_name %}</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    {% if perms.invoices.admin %}
                        <li>
                            <a class="" href="{% url 'invoices:admin' %}">{% translate "Invoice Managment" %}</a>
                        </li>
                    {% endif %}
                </ul>
            </div>

        </div>
    </nav>

    <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 %}