{% load static %}

{% partialdef project-experiment-card inline %}
<a href="{% url item_url item_id %}"
   hx-get="{% url item_url item_id %}"
   hx-target="#main-content"
   hx-swap="innerHTML show:window:top"
   hx-push-url="true">
    <div class="border rounded-lg mb-6 h-48 md:min-w-32 overflow-hidden
                {% if level == 1 %}
                {% elif level == 2 %}w-11/12 ml-auto
                {% elif level == 3 %} w-10/12 ml-auto {% else %} w-9/12 {% endif %}">
        <div class="{% if level == 1 %} bg-green-500 {% else %} bg-lime-300 {% endif %} h-3 md:h-5 w-full"></div>
        <div class="p-3">
            <h2 class="text-xl font-bold mb-2 truncate">{{ item.name_display }}</h2>
            <p class="text-sm font-normal mb-2">({{ item.datetime_start|date:"Y-m-d" }})</p>
            {% if level > 1 %}
                {% if item.description %}
                    <hr class="my-2"/>
                    <p class="text-xs sm:text-sm line-clamp-2">{{ item.description|truncatechars:128 }}</p>
                {% endif %}
            {% endif %}
        </div>
    </div>
</a>
{% endpartialdef project-experiment-card %}

<div id="list-content" class="px-4 sm:px-6 py-4 lg:py-6">
    <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 class="grid grid-cols-12 gap-4">
        <section id="project-nav" class="hidden lg:grid col-span-3 mb-4">
            <div id="projects-list">
                <h1 class="text-2xl font-bold mb-4">{{ project_count|default:"" }} projects</h1>
                {% for project in page_obj %}
                    <p>
                        <a href="{% url 'lara_django_projects:project-detail' project.project_id %}"
                           hx-get="{% url 'lara_django_projects:project-detail' project.project_id %}"
                           hx-target="#main-content"
                           hx-swap="innerHTML show:window:top"
                           hx-push-url="true"
                           class="text-blue-800 hover:underline hover:text-blue-400">{{ project.name }}</a>
                    </p>
                {% endfor %}
            </div>
        </section>
        <section id="project-list" class="col-span-12 lg:col-span-6">
            {% for item in object_list %}
                {% with item_id=item.project_id|default:item.experiment_id|default:item.pk %}
                    {% with item_url="lara_django_projects:project-detail" %}
                        {% with level=item.get_level|default:1 %}
                            {% partial project-experiment-card %}
                        {% endwith %}
                    {% endwith %}
                {% endwith %}
            {% empty %}
                <p class="text-gray-500">No items found.</p>
            {% endfor %}
        </section>
        <section id="filters" class="hidden lg:grid col-span-3 mb-4">
            {% if filter %}
            <div class="border rounded-lg px-3 pt-3">
                <h2 class="text-lg font-bold">Filter</h2>
                <form id="filter-form"
                      hx-get="{{ request.path }}"
                      hx-target="#main-content"
                      hx-swap="innerHTML show:window:top">
                    {% for field in filter.form.visible_fields %}
                    <div class="flex flex-col">{{ field.as_field_group }}</div>
                    {% endfor %}
                    <button type="submit" class="btn btn-success ml-2 mt-3">Filter</button>
                </form>
            </div>
            {% endif %}
        </section>
    </div>
    <!-- Floating Add Button -->
    {% if add_link %}
    <a href="{% url add_link %}"
       hx-get="{% url add_link %}"
       hx-target="#main-content"
       hx-swap="innerHTML show:window:top"
       hx-push-url="true"
       class="btn btn-circle bg-orange-500 hover:bg-orange-600 fixed bottom-6 right-6 text-white text-3xl shadow-lg">+</a>
    {% endif %}
</div>