{% if item_url and item_id %}
<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"
   class="js-project-card relative block"
   draggable="true"
   data-project-card="true"
   data-project-id="{{ item_id }}"
   data-project-name="{{ item.name_display|default:item.name }}">
    <p data-drop-hint="true"
       class="hidden absolute right-2 top-2 z-10 rounded bg-green-600 px-2 py-1 text-xs font-semibold text-white">
        Drop to make sub-project
    </p>
    <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>
{% else %}
<div class="border rounded-lg mb-6 h-48 flex items-center justify-center bg-red-100 text-red-700">
    Invalid project link
</div>
{% endif %}