{% load i18n %}
{# Partial: één kaart-item, gebruikt door board_detail.html en create_card HTMX response #}
<div id="card-{{ card.id }}" class="card kanban-card shadow {% if card.color %}text-bg-{{ card.color }} border-0{% else %}border border-secondary-subtle{% endif %} mb-2 p-3 cursor-grab"
     {% if hx_oob %}{% if hx_oob_append %}hx-swap-oob="beforeend:#list-cards-{{ card.list.id }}"{% else %}hx-swap-oob="true"{% endif %}{% endif %}
     data-card-id="{{ card.id }}"
     data-move-url="{% url 'aa_kanban:move_card' card.id %}"
     data-bs-toggle="modal"
     data-bs-target="#cardModal"
     hx-get="{% url 'aa_kanban:card_modal' card.id %}"
     hx-target="#cardModalBody">

    {% if card.labels.all and not summary_mode %}
        <div class="d-flex flex-wrap gap-1 mb-2">
            {% for label in card.labels.all %}
                <span class="badge bg-{{ label.color }} {% if not card.color %}text-white{% else %}border{% endif %}" style="font-size: 0.7rem; {% if card.color and label.color == card.color %}border-color: rgba(255,255,255,0.5) !important;{% endif %}">
                    {{ label.name }}
                </span>
            {% endfor %}
        </div>
    {% endif %}

    <div class="card-title fw-semibold mb-1" style="font-size: 0.95rem;">
        {{ card.title }}
    </div>

    {% if card.description and not summary_mode %}
        <div class="card-text opacity-75 mb-2" style="font-size: 0.8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
            {{ card.description }}
        </div>
    {% endif %}

    <div class="d-flex justify-content-between align-items-center mt-2 pt-1 opacity-75" style="font-size: 0.8rem;">
        <div>
            {% if card.due_date and not summary_mode %}
                <span><i class="far fa-calendar-alt me-1 {% if not card.color %}text-warning{% endif %}"></i>{{ card.due_date|date:"M d" }}</span>
            {% endif %}
        </div>
        <div class="d-flex align-items-center gap-1">
            {% for assignee in card.assignees.all %}
                <span class="badge bg-light text-dark border" title="{{ assignee.username }}">
                    <i class="fas fa-user me-1 text-secondary"></i>{{ assignee.username|slice:":6" }}
                </span>
            {% endfor %}
        </div>
    </div>
</div>