{% load static %}

<a hx-get="{% url 'lara_django_projects:experiment-data-explorer' item.data_id %}"
   hx-target="#data-explorer-tabs">
    <div class="bg-base-100 border rounded-lg p-6 mb-6 cursor-pointer">
        <!-- Top section-->
        <div class="grid grid-cols-4 gap-x-4">
            {% if item.image %}
            <div
                class="col-span-4 sm:col-span-2 md:col-span-1 h-full content-center"
            >
                <figure>
                    <img
                        class="rounded-lg"
                        src="{% static '{{ item.image }}' %}"
                        alt="Project/Experiment Image"
                    />
                </figure>
            </div>
            {% endif %}
            <div class="col-span-4 mt-2 sm:mt-0 sm:col-span-2 md:col-span-3">
                {% if item.tag %}
                <div
                    class="badge badge-info bg-[#1879ca] text-white rounded-none px-1 py-3 mb-4"
                >
                    {{ item.tag }}
                </div>
                {% endif %}
                <h2 class="text-xl font-bold">
                    {{ item.name_display }}
                    <p class="text-sm font-normal"
                        >({% if item.datetime_start %}{{ item.datetime_start }} 
                        {% elif item.datetime_created %} {{ item.datetime_created }}
                        {% endif %})</p
                    >
                </h2>
                <div class="divider"></div>
                <div class="grid grid-cols-3">
                    <div class="col-span-3 md:col-span-1">
                        <ul>
                            <li>Tags: {% for tag in item.tags.all %}{{ tag }}{% if not forloop.last %}, {% endif %}{% endfor %}</li> 
                            <li>Description: {{ item.description | truncatewords:30 }}</li>
                        </ul>
                    </div>
                    <div class="col-span-3 md:col-span-1">
                        <ul>
                            <li class="text-xl font-bold">
                                {{ item.get_status_display }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>