{% load static %}

{% comment %}
   Partial: partials/app_card.html — renders a single LARA app card.
   Expects `item` with keys: name, color, description, image, class_apps, instance_apps.
{% endcomment %}

<div class="bg-base-100 border border-base-300 rounded-xl shadow-md overflow-hidden">

    {# ── Coloured header ── #}
    <div class="bg-{{ item.color }}-500 px-4 py-3">
        <h2 class="text-white text-lg font-semibold leading-snug">{{ item.name }}</h2>
    </div>

    {# ── Body ── #}
    <div class="p-4">
        <div class="flex flex-col sm:flex-row gap-4">

            {# Optional thumbnail #}
            {% if item.image %}
            <div class="flex-shrink-0 flex justify-center sm:justify-start">
                <figure>
                    <img class="rounded-lg w-20 h-20 sm:w-24 sm:h-24 object-cover"
                         src="{% static item.image %}"
                         alt="{{ item.name }}" />
                </figure>
            </div>
            {% endif %}

            {# Description + action buttons #}
            <div class="flex-1 min-w-0">
                <p class="text-sm text-base-content/70 mb-3 line-clamp-3">
                    {{ item.description }}
                </p>

                {# ── Class apps ── #}
                {% if item.class_apps %}
                <div class="flex flex-wrap gap-1.5 mb-2">
                    {% for app_link in item.class_apps %}
                    <a href="{% url app_link.path %}"
                       class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium
                              bg-{{ app_link.color }}-100 text-{{ app_link.color }}-800
                              border border-{{ app_link.color }}-300
                              hover:bg-{{ app_link.color }}-200 transition-colors duration-150">
                        {{ app_link.name }}
                    </a>
                    {% endfor %}
                </div>
                {% endif %}

                {# ── Instance apps ── #}
                {% if item.instance_apps %}
                <div class="flex flex-wrap gap-1.5">
                    {% for app_link in item.instance_apps %}
                    <a href="{% url app_link.path %}"
                       class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium
                              bg-{{ app_link.color }}-100 text-{{ app_link.color }}-800
                              border border-{{ app_link.color }}-300
                              hover:bg-{{ app_link.color }}-200 transition-colors duration-150">
                        {{ app_link.name }}
                    </a>
                    {% endfor %}
                </div>
                {% endif %}

            </div>{# /flex-1 #}
        </div>{# /flex col→row #}
    </div>{# /p-4 body #}
</div>