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

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

    @keyframes shake {
        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 {
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation-iteration-count: infinite;
    }

    @keyframes updown {
        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 {
        animation: updown 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation-iteration-count: infinite;
    }

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

    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?version={{version}}', {
        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');
            const error_div = document.querySelector('#error-div');
            const loading_div = document.querySelector('#loading-div');
            error_div.classList.toggle('hide');
            loading_div.classList.toggle('hide');
        }
    })

</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">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Ghost Tools</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav"></ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="{% url 'ghosttools:add' %}">Add Corporate Token</a></li>
            {% if request.user.ghost_character.token %}
                <li><a href="{% url 'ghosttools:set' %}">Linked: {{ request.user.ghost_character.token.character_name }}</a></li>
            {% else %}
                <li><a href="{% url 'ghosttools:set' %}">Set Linked Character</a></li>
            {% endif %}
        </ul>
      </div>
    </div>
  </nav>

<div id="root">
    <div id="app">
        <div id="loading-div" class="flex-container">
            <div class="text-center">
              <div class="bottom-text">
                <div class="lds-dual-ring"></div>
              </div>
              <h3>Loading Page</h3>
              <p>Please Wait</p>
            </div>
          </div>
        <div id="error-div" class="flex-container hide">
            <div class="text-center">
              <div class="bottom-text">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="100"
                  height="100"
                  fill="currentColor"
                  class="bi bi-exclamation-triangle error-anim"
                  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 %}