<!DOCTYPE html>
{% load static %}
{% load core %}
{% load i18n %}
<html lang="en">
  <head>
    <title>

      {% block title %}
      {% endblock title %}

    </title>

    {% block meta %}
      <meta charset="utf-8">
      <meta name="description" content="Description">
      <meta name="author" content="Author">
      <meta name="theme-color" content="#ffffff" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="generator"
            content="APIS Core{% if debug %} {% apis_version %}{% endif %}">
      <meta name="htmx-config"
            content='{"responseHandling":[ {"code":"204", "swap": true}, {"code":"[23]..", "swap": true}, {"code":"[45]..", "swap": false, "error":true}, {"code":"...", "swap": false}]}' />
    {% endblock meta %}

    {% block favicons %}
      <link rel="apple-touch-icon"
            sizes="180x180"
            href="{% shared_url %}favicon/apple-touch-icon.png" />
      <link rel="icon"
            type="image/png"
            sizes="32x32"
            href="{% shared_url %}favicon/favicon-32x32.png" />
      <link rel="icon"
            type="image/png"
            sizes="16x16"
            href="{% shared_url %}favicon/favicon-16x16.png" />
      <link rel="manifest" href="{% shared_url %}favicon/manifest.json" />
      <link rel="mask-icon"
            href="{% shared_url %}favicon/safari-pinned-tab.svg"
            color="#00aba9" />
    {% endblock favicons %}

    {% block styles %}
      <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.css" />
      <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
      <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" />
      <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" />
      <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous">
      <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css"
            integrity="sha512-z/90a5SWiu4MWVelb5+ny7sAayYUfMmdXKEAbpj27PfdkamNdyI3hcjxPxkOPbrXoKIm7r9V2mElt5f1OtVhqA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer" />
      <link href="{% static 'css/override_bootstrap.min.css' %}" rel="stylesheet" />
      <link href="{% static 'css/material-symbols.css' %}" rel="stylesheet" />
      <link href="{% static 'css/core.css' %}" rel="stylesheet" />
      <link href="{% static 'css/E53_Place_popover.css' %}" rel="stylesheet" />
    {% endblock styles %}

    {% block scriptHeader %}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>
      <script src="{% static "js/core.js" %}"></script>
      <script src="{% static 'js/E53_Place_popover.js' %}"></script>
      <script src="{% static 'js/apis_select2.js' %}"></script>
      <script src="{% static 'autocomplete_light/autocomplete_light.js' %}"></script>
    {% endblock scriptHeader %}

  </head>
  <body role="document"
        class="d-flex flex-column min-vh-100"
        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <header>
      <!-- Start site navigation -->
      <nav class=" 
        {% block nav-class %}navbar navbar-expand-lg navbar-light bg-light border-bottom mb-2 p-0{% endblock nav-class %}
         ">
        <div class="container-fluid">

          {% block navbar-before %}
          {% endblock navbar-before %}

          <button class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarNavDropdown"
                  aria-controls="navbarNavDropdown"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" />
          </button>
          <!-- Start main menu -->
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul id="main-menu" class="navbar-nav me-auto">

              {% block main-menu %}
              {% endblock main-menu %}

              {% block main-menu-extra %}
              {% endblock main-menu-extra %}

            </ul>

            {% block userlogin-menu %}
              <!-- Start user login submenu -->
              <ul class="navbar-nav">
                {% if user.is_authenticated %}
                  <li class="nav-item dropdown ml-auto">
                    <a href=""
                       class="nav-link dropdown-toggle"
                       data-bs-toggle="dropdown"
                       role="button"
                       aria-haspopup="true"
                       aria-expanded="false">{{ user.get_username }}</a>
                    <div class="dropdown-menu dropdown-menu-end">

                      {% block user-menu-items %}
                        <div class="dropdown-item">
                          <form action="{% url 'apis_core:logout' %}?next=/" method="post">
                            {% csrf_token %}
                            <button type="submit" class="btn">
                              <span class="material-symbols-outlined material-symbols-align">logout</span>
                              {% translate "log out" %}
                            </button>
                          </form>
                        </div>
                      {% endblock user-menu-items %}

                    </div>
                  </li>
                {% else %}
                  <li class="nav-item dropdown ml-auto">
                    <a class="nav-link p-0"
                       href="{% url 'apis_core:login' %}?next={{ request.path|urlencode }}">
                      <span class="material-symbols-outlined">login</span>
                    </a>
                  </li>
                {% endif %}
              </ul>
              <!-- End user login submenu -->
            {% endblock userlogin-menu %}

          </div>
          <!-- End main menu -->
        </div>
      </nav>
      <!-- End site navigation -->
    </header>
    <!-- Start main content block -->
    <main id="content" role="main" class="wrapper flex-grow-1 mb-3">

      {% block messages %}
        {% if messages %}
          <div class="messages container-fluid">
            {% for message in messages %}
              <div class="alert alert-dismissible fade show {% if message.tags %}alert-{{ message.tags }}"{% endif %} role="
                   alert
                   ">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      {% endblock messages %}

      {% block content %}
      {% endblock content %}

    </main>
    <!-- End main content block -->

    {% block footer %}
      <footer class="border-top p-2 bg-light">
        <div class="row m-0">
          <div class="col text-start">

            {% block footer-left %}
              {% include "partials/footer-left.html" %}
            {% endblock footer-left %}

          </div>
          <div class="col text-center">

            {% block footer-center %}
              <a href="https://www.oeaw.ac.at/acdh/">
                <img id="logo"
                     class="icon"
                     alt="ACDH Logo"
                     title="Austrian Centre for Digital Humanities (ACDH) of the Austrian Academy of Sciences"
                     src="https://fundament.acdh.oeaw.ac.at/common-assets/images/acdh_logo.svg" />
              </a>
            {% endblock footer-center %}

          </div>
          <div class="col text-end">

            {% block footer-right %}
              {% block imprint %}
              {% endblock imprint %}
            {% endblock footer-right %}

          </div>
        </div>
      </footer>
    {% endblock footer %}

    {% block scripts %}
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
              integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
              crossorigin="anonymous"></script>
      <script src="https://unpkg.com/htmx.org@2.0.4"></script>
    {% endblock scripts %}

    {% block modal %}
      <!-- Modal -->
      <div class="modal fade"
           id="modal"
           tabindex="-1"
           aria-labelledby="modalLabel"
           aria-hidden="true">
        <div class="modal-dialog">
          <div id="modal-here" class="modal-content"></div>
        </div>
      </div>
    {% endblock modal %}

    <button type="button" class="btn btn-floating btn-lg" id="btn-back-to-top">
      <span>↑</span>
    </button>
  </body>
</html>
