{% extends 'lara_django_base/base.html' %}
{% load static %}

{% block head %}
<link rel="shortcut icon" type="image/ico" href="{% static 'lara_django_base/icons/favicons/favicon.ico' %}" />
{% endblock head %}


{% block extra_head %}
<style>
  /* ═══════════════════════════════════════════════════════════
   * Mobile-first sidebar
   * ═══════════════════════════════════════════════════════════ */

  /* Base: off-screen overlay panel (mobile) */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    height: 100%;
    width: 18rem;               /* w-72 */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width   0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Open state (toggled by Alpine.js on mobile) */
  #sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Sidebar label transition */
  #sidebar .sidebar-label {
    transition: opacity 0.15s ease;
  }

  /* Desktop: sticky slim bar that expands on hover */
  @media (min-width: 1024px) {
    #sidebar {
      position: sticky !important;
      top: 0 !important;
      z-index: auto !important;
      height: auto;
      min-height: 100vh;
      width: 4.5rem;           /* lg: comfortable icon column */
      transform: translateX(0) !important;
      box-shadow: none !important;
    }
    #sidebar:hover {
      width: 15rem;
    }
    #sidebar .sidebar-item svg {
      width: 1.5rem;           /* 24px on lg */
      height: 1.5rem;
    }
    #sidebar .sidebar-label {
      opacity: 0;
      font-size: 0.9375rem;    /* ~15px on lg */
      font-weight: 500;
    }
    #sidebar:hover .sidebar-label {
      opacity: 1;
    }
    /* Keep the drawer-toggle button pinned to the slim column width */
    #sidebar .drawer-toggle-btn-wrap {
      width: 4.5rem;
      flex-shrink: 0;
    }
  }

  @media (min-width: 1280px) {
    #sidebar {
      width: 5rem;             /* xl: generous icon column */
    }
    #sidebar:hover {
      width: 16rem;
    }
    #sidebar .sidebar-item svg {
      width: 1.75rem;          /* 28px on xl */
      height: 1.75rem;
    }
    #sidebar .sidebar-label {
      font-size: 1rem;         /* text-base on xl */
    }
    #sidebar .drawer-toggle-btn-wrap {
      width: 5rem;
    }
  }

  /* ═══════════════════════════════════════════════════════════
   * DaisyUI / Tailwind v4 cascade fixes
   * ═══════════════════════════════════════════════════════════ */

  /*
   * Tailwind CSS v4 defines utilities (e.g. `collapse`, `flex-wrap`) inside
   * @layer utilities.  Un-layered CSS always beats @layer styles in the cascade,
   * so these rules permanently override the Tailwind utilities and preserve
   * DaisyUI component behaviour — even after htmx boost re-triggers Tailwind's
   * browser-build MutationObserver and re-appends its generated <style> block.
   */
  .collapse {
    visibility: visible;
  }


</style>
{% endblock extra_head %}

{% block head_title %}
LARA
{% endblock head_title %}

{% partialdef navbar inline %}
{% include 'lara_django_base/partials/navbar.html' %}
{% endpartialdef navbar %}

{% partialdef sidebar inline %}
{% include 'lara_django_base/partials/sidebar.html' %}
{% endpartialdef sidebar %}

{% partialdef drawer inline %}
{% include 'lara_django_base/partials/drawer_expandable.html' %}
{% endpartialdef drawer %}


{% block top-navbar %}
  {% partial navbar %}
{% endblock top-navbar %}

{% block sidebar %}
    {% partial sidebar %}
{% endblock sidebar %}

{% block drawer %}
    {% partial drawer %}
{% endblock drawer %}

{% block content %}
    <p class="text-lg">This is the LARA home page.</p>
    <p class="text-lg">You can find more information about LARA in the <a href="{% url 'lara_django_base:about' %}">About</a> page.</p>
{% endblock content %}

{% block footer %}
<p >
  <a class="text-gray-500" href="https://gitlab.com/larasuite">LARAsuite</a>
   2024 | designed by benjamin lear and 
    <a class="text-gray-700"  href="mailto:mark.doerr@uni-greifswald.de">mark doerr</a> </a>
  </p>
{% endblock footer %}

{% block scripts %}
{% endblock scripts %}

{% block scripts-extra %}
{% if app_color %}
<script>
  function applyNavbarColor() {
    const el = document.getElementById('navbar-divider');
    if (!el) return;
    el.classList.add('bg-{{ app_color }}-600');
  }
  // Run on first load and after every htmx page swap.
  document.addEventListener('DOMContentLoaded', applyNavbarColor);
  document.addEventListener('htmx:afterSettle', applyNavbarColor);
</script>
{% endif %}
{% endblock scripts-extra %}