{% load static %}

<a href="{% url item_url item_id %}">
    <div class="bg-gray-50 border rounded-lg p-3 mb-6 h-42 md:min-w-32
                {% if level == 1 %} bg-green-100 
                {% elif level == 2 %}w-11/12 bg-lime-50 ml-auto 
                {% elif level == 3 %} w-10/12 bg-yellow-100  ml-auto {% else %} w-9/12 bg-blue-100 {% endif %}">
            <!-- Top section-->
             <div class="{% if level == 1 %} bg-green-500 {% else %} bg-lime-200 {% endif %} h-2 mb-2"></div>

        <h2 class="text-xl font-bold mb-2">
            {{ 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"/>
                    {{ item.description|truncatechars:100 }}
                {% endif %}
            {% endif %}
    </div>
</a>