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

      {% block title %}
        {% if object %}
          {{ object }}
        {% else %}
          Title Placeholder
        {% endif %}
      {% endblock %}

    </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 %}">
    {% 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/0.9.15/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/select2/4.0.5/css/select2.min.css" />
      {% include "partials/bootstrap4_css.html" %}
      <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/0.9.15/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/select2/4.0.5/js/select2.full.min.js"></script>
      <script src="{% static "js/core.js" %}"></script>
      <script src="{% static 'js/E53_Place_popover.js' %}"></script>
    {% endblock %}

  </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-toggle="collapse"
                  data-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 justify-content-end"
               id="navbarNavDropdown">
            <ul id="main-menu" class="navbar-nav mr-auto">

              {% block main-menu %}
                <li class="nav-item dropdown">
                  <a href="#"
                     class="nav-link dropdown-toggle"
                     data-toggle="dropdown"
                     role="button"
                     aria-haspopup="true"
                     aria-expanded="false">
                    Entities
                    <span class="caret" />
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                    {% block entities-menu-items %}
                      {% entities_verbose_name_plural_listview_url as entities %}
                      {% for verbose_name_plural, list_url in entities %}
                        <a class="dropdown-item" href="{{ list_url }}">{{ verbose_name_plural|capfirst }}</a>
                      {% endfor %}
                    {% endblock entities-menu-items %}

                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a href="#"
                     class="nav-link dropdown-toggle"
                     data-toggle="dropdown"
                     role="button"
                     aria-haspopup="true"
                     aria-expanded="false">Relations
                    <span class="caret" />
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                    {% block relations-menu-items %}
                    {% endblock relations-menu-items %}

                  </div>
                </li>
              {% 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-toggle="dropdown"
                       role="button"
                       aria-haspopup="true"
                       aria-expanded="false">User: {{ user.get_username }}</a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <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>
                            log out
                          </button>
                        </form>
                      </div>
                    </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">&times;</span>
                </button>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      {% endblock messages %}

      {% block content %}{% endblock %}

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

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

            {% 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"
                     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-right">

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

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

    {% block scripts %}
      {% include "partials/bootstrap4_js.html" %}
      <script src="https://unpkg.com/htmx.org@1.9.10"></script>
      <script>
        document.body.addEventListener('htmx:beforeSwap', function(event) {
          if (event.detail.xhr.status === 204) {
            // Swap content even when the response is empty.
            event.detail.shouldSwap = true;
          }
        });
      </script>
    {% endblock %}

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

    {% include "partials/backtotopbtn.html" %}
  </body>
</html>
