<!doctype html>
<html lang="en">
  <head hx-head="merge">
    {% block head %}
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Task pane</title>
      <link rel="icon" type="image/png" href="{{ url_for('static', path='/images/favicon.png') }}" />
      {# xlwings Wasm #}
      {% if settings.enable_wasm %}
        {% if settings.cdn_pyodide %}
          <script
            src="https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js"
            integrity="sha384-rm4QcPMX69sqmX2kWiJa3BF02sgdJkVyATWkw5NHAxBUAvmLXhToWZYaP2wCcyEe"
            crossorigin="anonymous"></script>
        {% else %}
          <script src="{{ url_for('static', path='/vendor/pyodide/pyodide.js') }}"></script>
        {% endif %}
      {% endif %}
      {# Config #}
      <script src="{{ url_for('static', path='/js/config.js') }}" defer></script>
      {# htmx #}
      {% if settings.enable_htmx %}
        <script src="{{ url_for('static', path='/vendor/htmx.org/dist/htmx.min.js') }}"></script>
        <script src="{{ url_for('static', path='/vendor/htmx-ext-head-support/head-support.js') }}"></script>
        <script src="{{ url_for('static', path='/vendor/htmx-ext-loading-states/loading-states.js') }}"></script>
        <script src="{{ url_for('static', path='/js/core/htmx-handlers.js') }}" defer></script>
      {% endif %}
      <script src="{{ url_for('static', path='/js/core/officejs-history-fix-part1.js') }}"></script>
      {# Office.js #}
      {% if settings.cdn_officejs %}
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
      {% else %}
        <script src="{{ url_for('static', path='/vendor/@microsoft/office-js/dist/office.js') }}"></script>
      {% endif %}
      <script src="{{ url_for('static', path='/js/core/officejs-history-fix-part2.js') }}"></script>
      {# Socket.io (must come before xlwings.js) #}
      {% block socketio %}
        {% if settings.enable_socketio %}
          <script src="{{ url_for('static', path='/vendor/socket.io/client-dist/socket.io.min.js') }}"></script>
        {% endif %}
      {% endblock socketio %}
      {# xlwings.js (must come before custom-function-code) #}
      <script type="module" src="{{ url_for('static', path='/js/core/xlwingsjs/xlwings.js') }}" defer></script>
      {% block socketio2 %}
        {% if settings.enable_socketio %}
          {# Must come after xlwings.js #}
          <script src="{{ url_for('static', path='/js/core/socketio-handlers.js') }}" defer></script>
        {% endif %}
      {% endblock socketio2 %}
      {# Alpine.js CSP boilerplate (must come before custom JS, which must come before alpinejs library) #}
      {% if settings.enable_alpinejs_csp %}
        <script src="{{ url_for('static', path='/js/core/alpinejs-csp-boilerplate.js') }}"></script>
      {% endif %}
      {# JS Config #}
      {# prettier-ignore-start #}
      <script id="config" type="application/json">
        {{ settings.jsconfig|tojson }}
      </script>
      {# prettier-ignore-end #}
      <script src="{{ url_for('static', path='/js/auth.js') }}"></script>
      {% block custom_functions_code %}
        <script src="{{ url_for('custom_functions_code') }}" defer></script>
        {% if settings.environment == "dev" or settings.enable_wasm %}
          <script src="{{ url_for('static', path='/js/core/reload-custom-functions.js') }}" defer></script>
        {% endif %}
      {% endblock custom_functions_code %}
      {# Bootstrap with the xlwings theme #}
      {% if settings.enable_bootstrap %}
        <link
          rel="stylesheet"
          href="{{ url_for('static', path='/vendor/bootstrap-xlwings/dist/bootstrap-xlwings.min.css') }}" />
        <script src="{{ url_for('static', path='/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ url_for('static', path='/js/core/bootstrap-customizations.js') }}" defer></script>
      {% endif %}
      {# Axios #}
      <script src="{{ url_for('static', path='/vendor/axios/dist/axios.min.js') }}" defer></script>
      {# Examples #}
      {% if settings.enable_examples %}
        <script src="{{ url_for('static', path='/js/core/examples.js') }}" defer></script>
      {% endif %}
      {# Own #}
      <link rel="stylesheet" href="{{ url_for('static', path='/css/core.css') }}" />
      <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}" />
      <script type="module" src="{{ url_for('static', path='/js/main.js') }}" defer></script>
      <script src="{{ url_for('static', path='/js/ribbon.js') }}" defer></script>
      {% block hotreload %}
        {% if settings.environment == "dev" and settings.enable_socketio %}
          <script src="{{ url_for('static', path='/js/core/hotreload.js') }}" defer></script>
        {% endif %}
      {% endblock hotreload %}
      {% block extra_head %}
        {# This allows to selectively load Alpine.js components #}
      {% endblock extra_head %}
      {# Alpine.js CSP build (must come after alpinejs-csp-boilerplate.js and custom code such as main.js) #}
      {% if settings.enable_alpinejs_csp %}
        <script src="{{ url_for('static', path='/vendor/@alpinejs/csp/dist/cdn.min.js') }}" defer></script>
      {% endif %}
    {% endblock head %}
  </head>

  <body hx-ext="head-support">
    <div
      id="global-error-alert"
      class="alert alert-danger alert-dismissible fade show d-none z-index-1000"
      role="alert">
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      <span></span>
    </div>
    <div id="global-status-alert" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      <span></span>
    </div>
    {% block content %}
    {% endblock content %}
  </body>
</html>
