{% extends "aa_kanban/base.html" %}
{% load i18n static %}

{% block page_title %}{{ title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'aa_kanban/css/kanban.css' %}?v=5">
{% endblock %}

{% block aa_kanban_content %}
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="fas fa-box-archive me-2 text-secondary"></i>{% trans "Archived Cards" %} &mdash; {{ board.name }}</h2>
            <p class="text-muted mb-0">{% trans "Cards automatically archived after sitting in the last column too long." %}</p>
        </div>
        <div>
            <a href="{% url 'aa_kanban:board_detail' board.slug %}" class="btn btn-secondary btn-sm" title="{% trans 'Back to board' %}">
                <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Board" %}
            </a>
        </div>
    </div>

    <div class="row g-3">
        {% for card in cards %}
            <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <div class="mb-1 small text-muted">
                    <i class="fas fa-layer-group me-1"></i>{{ card.list.name }}
                    &bull;
                    <i class="far fa-clock me-1"></i>{% trans "Archived" %} {{ card.archived_at|date:"Y-m-d" }}
                </div>
                {% include "aa_kanban/partials/card_item.html" with card=card can_write=False hide_menu=True summary_mode=True %}
            </div>
        {% empty %}
            <div class="col-12">
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-box-open fa-2x mb-2"></i>
                    <p>{% trans "No archived cards on this board yet." %}</p>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<!-- Modal container voor kaartdetails -->
<div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" id="cardModalBody">
            <div class="modal-body text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{% trans "Loading..." %}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script src="{% static 'aa_kanban/js/kanban.js' %}?v=4"></script>
{% endblock %}