{% load static %}

<a href="{% url item_url item_id %}">
    <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 %}">
            <!-- Green bar at very top, full width -->
            <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>