{% extends 'allianceauth/base-bs5.html' %}
{% load i18n %}
{% block page_title %}{{page_title}}{% endblock %}

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

{% 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 "/" + 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("d-none");
        loading_div.classList.toggle("d-none");
      },
      cache: false,
    });
  </script>
{% endblock extra_javascript %}
