{% 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="mb-2">
                    {# Mobile (< sm): wrapping rounded chips — easy tap targets #}
                    <div class="flex flex-wrap gap-1.5 sm:hidden">
                        {% 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>

                    {# Desktop (≥ sm): segmented / joined pill-group #}
                    <div class="hidden sm:inline-flex items-center rounded-md shadow-sm">
                        {% for app_link in item.class_apps %}
                        <a href="{% url app_link.path %}"
                           class="text-slate-800 hover:text-blue-600 text-sm bg-white
                                  hover:bg-{{ app_link.color }}-100
                                  border border-{{ app_link.color }}-400
                                  {% if forloop.first %}rounded-l-lg{% elif forloop.last %}rounded-r-lg border-l-0{% else %}border-l-0{% endif %}
                                  font-medium px-4 py-2 inline-flex items-center
                                  transition-colors duration-150">
                            {{ app_link.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# ── Instance apps ── #}
                {% if item.instance_apps %}
                <div>
                    {# Mobile: wrapping chips #}
                    <div class="flex flex-wrap gap-1.5 sm:hidden">
                        {% 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>

                    {# Desktop: joined pill-group #}
                    <div class="hidden sm:inline-flex items-center rounded-md shadow-sm mt-2">
                        {% for app_link in item.instance_apps %}
                        <a href="{% url app_link.path %}"
                           class="text-slate-800 hover:text-blue-600 text-sm bg-white
                                  hover:bg-{{ app_link.color }}-100
                                  border border-{{ app_link.color }}-400
                                  {% if forloop.first %}rounded-l-lg{% elif forloop.last %}rounded-r-lg border-l-0{% else %}border-l-0{% endif %}
                                  font-medium px-4 py-2 inline-flex items-center
                                  transition-colors duration-150">
                            {{ app_link.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

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