{% 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>
  .sidebar-expanded {
      width: 12rem; /* 64 */
  }
  .sidebar-collapsed {
      width: 4rem; /* 16 */
  }
  .sidebar-collapsed .sidebar-item span {
      display: none;
  }
  .sidebar-expanded .sidebar-item span {
      display: inline;
  }
</style>
{% endblock extra_head %}

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

{% block top-navbar %}
  {% include 'partials/navbar.html' %}
{% endblock top-navbar %}

{% block sidebar %}
    {% include 'lara_django_base/components/sidebar.html' %}
{% endblock sidebar %}

{% block drawer %}
    {% include 'lara_django_base/components/drawer_expandable.html' %}
{% endblock drawer %}

<div id="main-content">
{% 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 %}

</div>


{% 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 %}

<script>
  const menuButton = document.getElementById('menu-button');
  const sidebar = document.getElementById('sidebar');

  menuButton.addEventListener('click', () => {
      sidebar.classList.toggle('sidebar-expanded');
      sidebar.classList.toggle('sidebar-collapsed');
  });
</script>
{% if app_color %}
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
     const el = document.getElementById('navbar-divider');
    if (!el) return;
    // set navbar color
    el.classList.add('bg-{{ app_color }}-600');
    // el.classList.add('bg-green-200');

    // Set CSS custom property for dynamic color
    // el.style.setProperty('--navbar-color', `var(--color-{{ app_color }}-200)`);
    // el.classList.add('navbar-divider-colored');

  });
</script>
{% endif %}

{% endblock scripts-extra %}