<!doctype html>
<html data-theme="envipath" lang="en">
  {% load static %}
  <head>
    <title>{{ title }}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token }}" />

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

    {# Tailwind CSS + DaisyUI Output #}
    <link
      href="{% static 'css/output.css' %}"
      rel="stylesheet"
      type="text/css"
    />

    {# Chart.js - For timeseries charts #}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="{% static 'js/utils/timeseries-chart.js' %}"></script>

    {# Alpine.js - For reactive components #}
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
    <script src="{% static 'js/alpine/index.js' %}"></script>
    <script src="{% static 'js/alpine/search.js' %}"></script>
    <script src="{% static 'js/alpine/pagination.js' %}"></script>
    <script src="{% static 'js/alpine/pathway.js' %}"></script>
    <script src="{% static 'js/alpine/components/schema-form.js' %}"></script>
    <script src="{% static 'js/alpine/components/widgets.js' %}"></script>

    {# Font Awesome #}
    <link
      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
      rel="stylesheet"
    />

    {# Discourse embed for community #}
    <script src="https://community.envipath.org/javascripts/embed-topics.js"></script>

    <script>
      const csrftoken = document.querySelector("[name=csrf-token]").content;
    </script>

    {# General EP JS #}
    <script src="{% static 'js/pps.js' %}"></script>

    {% if not debug %}
      <!-- Matomo -->
      <script>
        var _paq = (window._paq = window._paq || []);
        _paq.push(["trackPageView"]);
        _paq.push(["enableLinkTracking"]);
        (function () {
          var u = "//matomo.envipath.com/";
          _paq.push(["setTrackerUrl", u + "matomo.php"]);
          _paq.push(["setSiteId", "{{ meta.site_id }}"]);
          var d = document,
            g = d.createElement("script"),
            s = d.getElementsByTagName("script")[0];
          g.async = true;
          g.src = u + "matomo.js";
          s.parentNode.insertBefore(g, s);
        })();
      </script>
      <!-- End Matomo Code -->
    {% endif %}
  </head>
  <body class="bg-base-300 min-h-screen">
    {% include "components/navbar.html" %}

    {# Main Content Area #}
    <main class="w-full">
      {% block main_content %}
        {# Breadcrumbs - outside main content, optional #}
        {% if breadcrumbs %}
          <div id="bread" class="mx-auto max-w-7xl px-4 py-4">
            <div class="breadcrumbs text-sm">
              <ul>
                {% for elem in breadcrumbs %}
                  {% for name, url in elem.items %}
                    {% if forloop.parentloop.last %}
                      <li>{{ name }}</li>
                    {% else %}
                      <li><a href="{{ url }}">{{ name }}</a></li>
                    {% endif %}
                  {% endfor %}
                {% endfor %}
              </ul>
            </div>
          </div>
        {% endif %}

        {# Main content container - paper effect on medium+ screens #}
        <div
          id="docContent"
          class="bg-base-100 mx-auto md:my-8 md:max-w-6xl md:rounded-lg md:shadow-xl"
        >
          {# Messages - inside paper #}
          {% if message %}
            <div id="message" class="alert alert-info m-4">{{ message }}</div>
          {% endif %}

          {# Page content - no enforced styles #}
          {% block content %}
          {% endblock content %}

          {# License - inside paper if present #}
          {% if meta.url_contains_package and meta.current_package.license %}
            <div class="collapse-arrow bg-base-200 collapse p-8">
              <input type="checkbox" checked />
              <div class="collapse-title text-xl font-medium">License</div>
              <div class="collapse-content">
                <a
                  target="_blank"
                  href="{{ meta.current_package.license.link }}"
                >
                  <img
                    src="{{ meta.current_package.license.image_link }}"
                    alt="License"
                  />
                </a>
              </div>
            </div>
          {% endif %}
        </div>
      {% endblock main_content %}
    </main>

    {% include "components/footer.html" %}

    {# Floating Help Tab #}
    {% if not public_mode %}
      <div class="fixed top-1/2 right-0 z-50 -translate-y-1/2">
        <a
          href="https://community.envipath.org/"
          target="_blank"
          class="btn btn-secondary hover:btn-secondary-focus text-secondary-content flex items-center justify-center text-sm shadow-lg transition-all duration-300 hover:-translate-x-1 hover:scale-105"
          title="Get Help from the Community"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"
          >
            <path
              d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
            />
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
            <path d="M12 17h.01" />
          </svg>
        </a>
      </div>
    {% endif %}

    {% block modals %}
      {% include "modals/search_modal.html" %}
    {% endblock %}

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Show actions button if there are actions defined
        const actionsButtonUl = document.querySelector("#actionsButton ul");
        if (actionsButtonUl && actionsButtonUl.children.length > 0) {
          document.getElementById("actionsButton").style.display = "";
        }
      });

      // Open search modal function
      function openSearchModal() {
        const searchModal = document.getElementById("search_modal");
        if (searchModal) {
          searchModal.showModal();
        }
      }

      // Click handler for search badge
      const searchTrigger = document.getElementById("search-trigger");
      if (searchTrigger) {
        searchTrigger.addEventListener("click", function (event) {
          event.preventDefault();
          openSearchModal();
        });
      }

      // Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
      document.addEventListener("keydown", function (event) {
        // Check if user is typing in an input field
        const activeElement = document.activeElement;
        const isInputField =
          activeElement &&
          (activeElement.tagName === "INPUT" ||
            activeElement.tagName === "TEXTAREA" ||
            activeElement.contentEditable === "true");

        if (isInputField) {
          return; // Don't trigger shortcut when typing in input fields
        }

        // Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
        const isMac = /Mac/.test(navigator.platform);
        const isCorrectModifier = isMac ? event.metaKey : event.ctrlKey;

        if (isCorrectModifier && event.key === "k") {
          event.preventDefault();
          openSearchModal();
        }
      });
    </script>
  </body>
</html>
