{% extends "diario/base.html" %}
{% block title %}Ricerca{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8 fade-in">

    <div class="d-flex align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-search me-2" style="color:var(--accent);"></i>Ricerca</h4>
    </div>

    <form method="get" class="mb-4">
        <div class="input-group">
            <input type="search" name="q" value="{{ q }}" class="form-control form-control-lg" placeholder="Cerca conversazioni, obiettivi, documenti, persone..." autofocus>
            <button type="submit" class="btn btn-primary px-4">
                <i class="bi bi-search"></i>
            </button>
        </div>
    </form>

    {% if q %}
    <p class="text-muted small mb-4">
        {% if total %}{{ total }} risultat{{ total|pluralize:"o,i" }} per <strong>"{{ q }}"</strong>{% else %}Nessun risultato per <strong>"{{ q }}"</strong>{% endif %}
    </p>

    {% if risultati.persone %}
    <p class="section-title"><i class="bi bi-people me-1"></i>Persone</p>
    <div class="row g-2 mb-4">
        {% for persona in risultati.persone %}
        <div class="col-6 col-md-4 fade-in">
            <a href="{% url 'persona_dettaglio' persona.pk %}" class="card-link">
                <div class="card p-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar" style="width:24px;height:24px;font-size:.6rem;">{{ persona.username|slice:":2"|upper }}</span>
                        <span class="fw-semibold small">{{ persona.get_full_name|default:persona.username }}</span>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {% if risultati.conversazioni %}
    <p class="section-title"><i class="bi bi-chat-quote me-1"></i>Conversazioni</p>
    {% for conv in risultati.conversazioni %}
    <div class="card mb-2 p-3 fade-in">
        <a href="{% url 'conversazione_dettaglio' conv.pk %}" class="text-decoration-none text-dark fw-semibold">{{ conv.titolo }}</a>
        <div class="d-flex gap-2 mt-1">
            <small class="text-muted">{{ conv.data|date:"d/m/Y" }}</small>
            {% if conv.registrato_da %}
            <small class="text-muted">· {{ conv.registrato_da.get_full_name|default:conv.registrato_da.username }}</small>
            {% endif %}
        </div>
        <p class="text-muted small mb-0 mt-1">{{ conv.contenuto|truncatewords:25 }}</p>
    </div>
    {% endfor %}
    <div class="mb-4"></div>
    {% endif %}

    {% if risultati.obiettivi %}
    <p class="section-title"><i class="bi bi-bullseye me-1"></i>Obiettivi</p>
    {% for obj in risultati.obiettivi %}
    <div class="card mb-2 p-3 fade-in">
        <div class="d-flex align-items-start justify-content-between">
            <div>
                <a href="{% url 'obiettivo_dettaglio' obj.pk %}" class="text-decoration-none text-dark fw-semibold">{{ obj.titolo }}</a>
                {% if obj.descrizione %}
                <p class="text-muted small mb-0 mt-1">{{ obj.descrizione|truncatewords:20 }}</p>
                {% endif %}
            </div>
            <span class="badge-stato stato-{{ obj.stato }} ms-2">{{ obj.get_stato_display }}</span>
        </div>
    </div>
    {% endfor %}
    <div class="mb-4"></div>
    {% endif %}

    {% if risultati.documenti %}
    <p class="section-title"><i class="bi bi-file-earmark-pdf me-1"></i>Documenti</p>
    {% for doc in risultati.documenti %}
    <div class="card mb-2 p-3 fade-in">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-file-earmark-pdf" style="color:#ef4444;"></i>
            <div>
                <a href="{% url 'documento_dettaglio' doc.pk %}" class="text-decoration-none text-dark fw-semibold">{{ doc.titolo }}</a>
                {% if doc.descrizione %}<p class="text-muted small mb-0 mt-1">{{ doc.descrizione|truncatewords:15 }}</p>{% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}

    {% endif %}

</div>
</div>
{% endblock %}