{% extends 'base.html' %}
{% block title %}Complaints Report{% endblock %}

{% block content %}

<div class="container-fluid page-container">

    {% include "reports/partials/page_header.html" with title="Complaints Report" icon="bi-chat-left-text" %}

    <!-- FILTERS -->
    {% include "reports/partials/filters.html" %}

    <!-- KPI (optional) -->
    {% if summary %}
        {% include "reports/partials/kpi_cards.html" with data=summary %}
    {% endif %}

    <!-- COMPLAINT LIST -->
    <div class="card shadow-sm p-3">

        {% for complaint in complaints %}
        <div class="list-card mb-3 p-3 border rounded">

            <div class="d-flex justify-content-between align-items-center">
                <strong>{{ complaint.tenant.username|default:"Unknown Tenant" }}</strong>
                <span class="badge bg-secondary">
                    {{ complaint.status|default:"pending" }}
                </span>
            </div>

            <div class="text-muted small mb-1">
                {{ complaint.category|default:"General" }}
            </div>

            <div>
                {{ complaint.description|default:"No description provided." }}
            </div>

        </div>
        {% empty %}
            <p class="text-center text-muted m-0">No complaints available.</p>
        {% endfor %}

    </div>

</div>

{% endblock %}