{% load static i18n statici18n conjunto %}
<!DOCTYPE html>
{#This is a generic html file for your application. You can extend it, or copy it and sort out the good parts ;-)#}
{% get_current_language as LANGUAGE_CODE %}

<html lang="{{ LANGUAGE_CODE }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{{ globals.project_title }}{% endblock %}</title>
  <link rel="manifest" href="/manifest.json">

  {% block head %}{% endblock %}

  {% conjunto_css_scripts %}

  {% block styles %}{% endblock styles %}

  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" >
</head>

<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% if request.GET.fluid_layout %} class="layout-fluid"{% endif %}>
{% block body %}

  {% csrf_token %}

  {% if not PRODUCTION %}
    <div class="bg-red" style="height:7px" title="{% translate 'Warning! This is a testing site.' %}"></div>
  {% endif %}

  <div class="page">
    {% block header %}{% endblock %}
    {% block main-menu %}{% endblock %}
    <!-- Page header -->
    <div class="page-wrapper">
      {% block page %}{% endblock %}

      <footer class="footer footer-transparent d-print-none">
        <div class="container-xl">
          {% block footer %}
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  {% for item in menus.footer %}
                    <li class="list-inline-item">
                      <a href="{{ item.url }}" class="link-secondary" rel="noopener">
                        {% if item.icon %}
                          {# TODO: add possibility for colored icons:  text-{{ icon-color }}#}
                          {# TODO: add possibility for e.g. target="_blank" or rel="noopener" #}
                          <i class="ti ti-{{ item.icon }}"></i>
                        {% endif %}
                        {{ item.title }}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright © {%  now "Y" %}
                    {# TODO: don't hardcode "nerdocs" here. #}
                    <a href="https://nerdocs.at" target="_blank" class="link-secondary">nerdocs</a>.
                    {% translate 'All rights reserved.' %}
                  </li>
                  {#            <li class="list-inline-item">#}
                  {#              <a href="./changelog.html" class="link-secondary" rel="noopener">#}
                  {#                v1.0.0-beta20#}
                  {#              </a>#}
                  {#            </li>#}
                </ul>
              </div>
            </div>
          {% endblock %}
        </div>
      </footer>
    </div>
  </div>
{% endblock %}

<script>
    const globals = {
        LANGUAGE_CODE: "{{ LANGUAGE_CODE }}",
    };
</script>
<!-- Current language: {{ LANGUAGE_CODE }} -->
<script type="application/javascript" src="{% statici18n LANGUAGE_CODE %}"></script>
{#<script type="application/javascript" src="{% get_static_prefix %}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>#}

{% conjunto_js_scripts %}


{# NEVER, EVER use htmx directly in the script tag. #}
{# Only load external js files using <script defer src="..."></script> #}
{# because HTMX itelf is loaded with defer, and will get executed AFTER scripts in the page #}
{% block scripts %}{% endblock scripts %}

{% block modal %}
  {# modal HTMX target. Override if needed #}
  <div id="modal" class="modal">
    <div id="dialog" class="modal-dialog modal-dialog-centered" role="document" hx-target="this">
      <!-- modal content will be inserted here -->
    </div>
  </div>
{% endblock modal %}

{% block toasts %}
  {# toasts HTMX target. Override if needed #}
  <div {# hx-ext="ws" ws-connect="/ws/messages" #}>
    <div id="toasts" data-toast-container class="toast-container position-fixed bottom-0 end-0 p-3 pb-5">
      {# include one hidden toast as template for Js cloning #}
      {% include 'conjunto/toast.html' %}

      {% for message in messages %}
        {# render toasts for pending Django messages, show them immediately #}
        {% include 'conjunto/toast.html' with message=message %}
      {% endfor %}
    </div>
  </div>
{% endblock toasts %}
</body>
</html>
