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

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

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

{% block aa_kanban_content %}
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
        <div>
            <h2 class="mb-1"><i class="fas fa-search me-2 text-primary"></i>{% trans "Search" %}</h2>
            <p class="text-muted mb-0">{% trans "Searches titles, descriptions, comments, names, labels, teams and card numbers on every board you can see." %}</p>
        </div>
        <a href="{% url 'aa_kanban:index' %}" class="btn btn-secondary btn-sm" title="{% trans 'Back to boards' %}">
            <i class="fas fa-arrow-left me-1"></i>{% trans "Back to boards" %}
        </a>
    </div>

    <div class="mb-4" style="max-width: 48rem;">
        {% include "aa_kanban/partials/search_form.html" with show_archived_toggle=True %}
    </div>

    {% if too_short %}
        <div class="alert alert-info">{% trans "Type at least 2 characters." %}</div>
    {% elif query %}
        <p class="text-muted small mb-2">
            {% blocktrans count counter=cards|length %}{{ counter }} card found{% plural %}{{ counter }} cards found{% endblocktrans %}
        </p>
        {% if truncated %}
            <div class="alert alert-warning py-2">
                {% blocktrans with limit=result_limit %}Showing the first {{ limit }} cards. Refine your search to narrow it down.{% endblocktrans %}
            </div>
        {% endif %}

        {% if cards %}
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>{% trans "Card" %}</th>
                            <th>{% trans "Board" %}</th>
                            <th>{% trans "Column" %}</th>
                            <th>{% trans "Assignees" %}</th>
                            <th>{% trans "Team" %}</th>
                            <th class="text-nowrap">{% trans "Updated" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for card in cards %}
                            <tr>
                                <td>
                                    <a href="{% if card.is_archived %}{% url 'aa_kanban:archived_cards' card.list.board.slug %}{% else %}{% url 'aa_kanban:board_detail' card.list.board.slug %}{% endif %}?card={{ card.id }}"
                                       class="fw-semibold text-decoration-none">
                                        <span class="text-muted">#{{ card.id }}</span> {{ card.title|highlight:query }}
                                    </a>
                                    {% if card.is_archived %}
                                        <span class="badge bg-secondary ms-1"><i class="fas fa-box-archive me-1"></i>{% trans "Archived" %}</span>
                                    {% endif %}
                                    {% for label in card.labels.all %}
                                        <span class="badge bg-{{ label.color }} ms-1">{{ label.name|highlight:query }}</span>
                                    {% endfor %}
                                    {% if card.snippet %}
                                        <div class="small text-muted mt-1">{{ card.snippet|highlight:query }}</div>
                                    {% endif %}
                                </td>
                                <td>{{ card.list.board.name }}</td>
                                <td>{{ card.list.name }}</td>
                                <td>
                                    {% for assignee in card.assignees.all %}
                                        <span class="badge bg-light text-dark border"><i class="fas fa-user me-1 text-secondary"></i>{{ assignee.username|highlight:query }}</span>
                                    {% empty %}
                                        <span class="text-muted">&mdash;</span>
                                    {% endfor %}
                                </td>
                                <td>{% if card.assigned_team %}{{ card.assigned_team.name|highlight:query }}{% else %}<span class="text-muted">&mdash;</span>{% endif %}</td>
                                <td class="text-nowrap small">{{ card.updated_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5 text-muted">
                <i class="fas fa-search fa-2x mb-2"></i>
                <p>{% trans "No cards found." %}</p>
            </div>
        {% endif %}
    {% endif %}
</div>
{% endblock %}