{% load static %}


{% partialdef project-experiment-card %}
{% include "lara_django_projects/partials/project_experiment_card.html" %}
{% endpartialdef project-experiment-card %}

{% partialdef project-create-card %}
{% include "lara_django_projects/partials/project_create_card.html" %}
{% endpartialdef project-create-card %}

{% partialdef experiment-create-card %}
{% include "lara_django_projects/partials/experiment_create_card.html" %}
{% endpartialdef experiment-create-card %}

{% partialdef projects-filter %}
{% include "lara_django_projects/partials/projects_filter.html" %}
{% endpartialdef projects-filter %}

{% partialdef pagination %}
{% include "lara_django_base/partials/pagination.html" %}
{% endpartialdef pagination %}



<div id="projects-overview-content" class="md:px-1 lg:px-[10vw]">
    <div class="flex justify-end mb-4">
        <a href="{% url 'lara_django_projects:project-create' %}"
           hx-get="{% url 'lara_django_projects:project-create' %}"
           hx-target="#main-content"
           hx-swap="innerHTML show:window:top"
           hx-push-url="true"
           class="btn bg-green-500 text-white mt-3">Add</a>
    </div>
    <button class="btn lg:hidden mb-2"
            onclick="let f=document.getElementById('filters');
                     if(f.classList.contains('hidden')){f.classList.remove('hidden');f.classList.add('grid','col-span-4','mb-4');this.textContent='Hide filters'}
                     else{f.classList.add('hidden');f.classList.remove('grid','col-span-4','mb-4');this.textContent='Show filters'}">
        Show filters
    </button>

    <div id="project-list-container" class="grid grid-cols-4 gap-4">
        <section id="project-list" class="col-span-4 lg:col-span-3">
            {% for item in page_obj %}
                {% with item_id=item.project_id %}
                    {% with item_url="lara_django_projects:project-detail" %}
                        {% with level=item.get_level %}
                                        {% partial project-experiment-card %}
                        {% endwith %}
                    {% endwith %}
                {% endwith %}
            {% endfor %}
            {% partial pagination %}
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
            {% partial projects-filter %}
        </section>
    </div>
</div>