{% extends 'lara_django_base/lara_base.html' %}

{% load static %}
{% block content %}

<button class="btn lg:hidden mb-2" id="show-filter-btn">Show filters</button>
    <div class="grid grid-cols-12 gap-4">
        <section id="project-nav" class="hidden lg:grid col-span-3 mb-4">
            <c-projects-navigator />
          </section>
      <section id="project-list" class="col-span-12 lg:col-span-6">
        <c-projects-list />
      </section>
      <section id="filters" class="hidden lg:grid col-span-3 mb-4">
        <c-projects-filter />
      </section>
      
    </div>
    <!-- Floating Add Project Button -->
  <button class="btn btn-circle bg-orange-500 hover:bg-orange-600 fixed bottom-6 right-6 text-white text-3xl shadow-lg">
    +
  </button>
  
 

{% endblock content %}

{% block scripts %}

<script src="{% static 'lara_django_base/js/toggle-drawer-onload.js' %}" defer></script>

<script>
    let btn = document.getElementById('show-filter-btn');
    btn.addEventListener('click', (e) => {
      let filterSection = document.getElementById('filters');
      if (filterSection.classList.contains('hidden')) {
        filterSection.classList.remove('hidden');
        filterSection.classList.add('grid');
        filterSection.classList.add('col-span-4');
        filterSection.classList.add('mb-4');
        e.target.textContent = 'Hide filters';
      } else {
        filterSection.classList.add('hidden');
        filterSection.classList.remove('grid');
        filterSection.classList.remove('col-span-4');
        filterSection.classList.remove('mb-4');
        e.target.textContent = 'Show filters';
      }
    });
  </script>

{% endblock scripts %}