{% load i18n %}
{# Board cards; expects `boards` with `stats` and `list_count`. #}
{% for board in boards %}
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card h-100 shadow rounded-3 border transition-hover position-relative" style="border-top: 4px solid var(--bs-{% if board.stats.needs_attention %}danger{% else %}primary{% endif %}) !important;">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h4 class="card-title h5 mb-0">
                        <a href="{% url 'aa_kanban:board_detail' board.slug %}" class="text-decoration-none stretched-link">
                            {{ board.name }}
                        </a>
                    </h4>
                    <div class="d-flex gap-1 align-items-center">
                        {% if board.stats.needs_attention %}
                            <span class="badge bg-danger" title="{% trans 'Cards need attention' %}"><i class="fas fa-exclamation-triangle"></i></span>
                        {% endif %}
                        {% if board.is_ticket_board %}
                            <span class="badge bg-warning text-dark" title="{% trans 'Ticket Board' %}"><i class="fas fa-ticket-alt"></i></span>
                        {% endif %}
                        {% if request.user.is_superuser or board.created_by == request.user or board in request.user.kanban_write_boards.all %}
                            <span class="badge bg-success">{% trans "Editor" %}</span>
                        {% else %}
                            <span class="badge bg-secondary">{% trans "Read-Only" %}</span>
                        {% endif %}
                    </div>
                </div>

                <p class="card-text text-muted small flex-grow-1">
                    {% if board.description %}
                        {{ board.description|truncatewords:20 }}
                    {% else %}
                        <em>{% trans "No description provided." %}</em>
                    {% endif %}
                </p>

                {% if board.stats.needs_attention %}
                    <ul class="list-unstyled small text-danger mb-0">
                        {% if board.stats.overdue %}
                            <li><i class="fas fa-calendar-times fa-fw me-1"></i>{% blocktrans count counter=board.stats.overdue %}{{ counter }} card past its due date{% plural %}{{ counter }} cards past their due date{% endblocktrans %}</li>
                        {% endif %}
                        {% if board.stats.inactive %}
                            <li><i class="fas fa-hourglass-half fa-fw me-1"></i>{% blocktrans count counter=board.stats.inactive with hours=board.stale_card_alert_hours %}{{ counter }} card inactive for over {{ hours }}h{% plural %}{{ counter }} cards inactive for over {{ hours }}h{% endblocktrans %}</li>
                        {% endif %}
                        {% for column in board.stats.over_wip %}
                            <li><i class="fas fa-layer-group fa-fw me-1"></i>{% blocktrans %}{{ column }} is over its WIP limit{% endblocktrans %}</li>
                        {% endfor %}
                    </ul>
                {% endif %}

                <div class="border-top pt-3 mt-3 d-flex justify-content-between align-items-center text-muted small">
                    <span><i class="fas fa-sticky-note me-1 text-primary"></i> <span class="fw-bold">{{ board.stats.card_count }}</span> {% trans "cards" %}</span>
                    <span><i class="fas fa-list-ul me-1 text-primary"></i> <span class="fw-bold">{{ board.list_count }}</span> {% trans "columns" %}</span>
                    <span><i class="far fa-clock me-1"></i> {{ board.updated_at|date:"d M Y" }}</span>
                </div>
            </div>
        </div>
    </div>
{% endfor %}