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

{% load static %}

{% block content %}

<div class="md:px-1 lg:px-[10vw]">
  <div class="flex justify-end mb-4">
    <a href="{% url create_link %}" class="btn bg-green-500 text-white mt-3">Add</a>
  </div>
  <button class="btn lg:hidden mb-2" id="show-filter-btn">Show filters</button>
  {% include 'lara_django_projects/components/projects_card_stack.html' %}
</div>

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

{% block scripts %}
<script src="{% static 'lara_django_base/js/toggle-drawer-on-load.js' %}" defer></script>
{% endblock %}