{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% block page_title %}{% trans "Industry Structures!" %}{% endblock %}
{% block extra_javascript %}
<script type="text/javascript">
    var BASE_URL = '/static/indydash/';

    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');
        }
    })

</script>
{% endblock extra_javascript %}

{% block content %}
<h1 class="text-center">Available Industrial Structures</h1>

<div id="root">
    <div id="app">
        <div class="text-center">
            <div class="text-center spinner-size lds-ripple" style="margin-bottom: 0px;"><div></div><div></div></div>
        </div>
    </div>
</div>
{% endblock content %}