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

{% block content %}
<div class="container mt-3">

    <div class="d-flex justify-content-between mb-3">
        <h4><i class="bi bi-chat-left-text"></i> Complaints</h4>

        {% if user.role == 'tenant' %}
        <a href="{% url 'complaint' %}" class="btn btn-dark">
            <i class="bi bi-plus-lg"></i> New Complaint
        </a>
        {% endif %}
    </div>

    <div class="card shadow-sm">
        <div class="table-responsive">

            <table class="table table-hover align-middle mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Tenant</th>
                        <th>Unit</th> <!-- ✅ NEW -->
                        <th>Category</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    {% for complaint in complaints %}
                    <tr>
                        <td>{{ complaint.tenant.username }}</td>
                        <td>{{ complaint.unit.name }}</td> <!-- ✅ NEW -->
                        <td>{{ complaint.category }}</td>
                        <td>{{ complaint.description|truncatechars:40 }}</td>

                        <td>
                            <span class="badge
                                {% if complaint.status == 'open' %}bg-warning
                                {% elif complaint.status == 'in_progress' %}bg-primary
                                {% else %}bg-success{% endif %}">
                                {{ complaint.status|title }}
                            </span>
                        </td>

                        <td>{{ complaint.created_at|date:"M d, Y" }}</td>

                        <td>
                            <div class="d-flex gap-2">

                                {% if user.role != 'tenant' and complaint.status == 'open' %}
                                    <a href="{% url 'complaint_progress' complaint.id %}" class="btn btn-sm btn-primary">
                                        Start
                                    </a>
                                {% endif %}

                                {% if user.role != 'tenant' and complaint.status != 'resolved' %}
                                    <a href="{% url 'resolve_complaint' complaint.id %}" class="btn btn-sm btn-success">
                                        Resolve
                                    </a>
                                {% endif %}

                            </div>
                        </td>

                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center">No complaints found</td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>
{% endblock %}