{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% block page_title %}{% trans "Corporation Audit" %}{% endblock %}
{% block extra_css %}
<style type="text/css">
    .lds-ripple,
    .lds-ripple div {
      box-sizing: border-box;
    }
    .lds-ripple {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ripple div {
      position: absolute;
      border: 4px solid currentColor;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    .lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    @keyframes lds-ripple {
      0% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 1;
      }
      100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
      }
    }
    .lds-size{
        margin: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
{% endblock %}
{% block extra_javascript %}
<script type="text/javascript">
    var BASE_URL = '/static/corptools/corp/';

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

    function loadNextScript (scripts) {
        if (!scripts.length) { return; }

        var script = scripts.shift();
        $.ajax(script, {
            dataType: 'script',
            success: function () { loadNextScript(scripts) },
        })
    }

    $.ajax(BASE_URL + 'asset-manifest.json', {
        dataType: "json",
        success : function (data, textStatus, jqXHR) {

            if (data && data.entrypoints && data.entrypoints.length > 0) {
                var scripts =
                    data.entrypoints
                        .filter(function (resource) {
                            return resource.match(/.+\.js$/)
                        })
                        .map(function (script) {
                            return BASE_URL + script;
                        });
                var cssFiles =
                    data.entrypoints
                        .filter(function (ressource) {
                            return ressource.match(/.+\.css$/)
                        })
                        .map(function (file) {
                            return BASE_URL + file;
                        });

                loadCss(cssFiles);
                loadNextScript(scripts);
            }
        },
        error: function () {
            console.log('unable to load react app, manifest file not accessible or corrupted');
            document.getElementById('lds').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor" class="bi bi-exclamation-triangle" 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><p>Error Loading Application!</p>';
        }
    })

</script>
{% endblock extra_javascript %}

{% block content %}
<div id="root">
    <div class="lds-size">
        <div id="lds" class="text-center lds-ripple" style="margin-top: auto;"><div></div><div></div></div>
    </div>
</div>
{% endblock content %}
