{% load i18n %}
<div class="card table-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>{% trans "Complaints" %}</h5>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary bulk-action-btn" data-tab="complaints" disabled>
                <i class="bi bi-check2-square"></i> Bulk Action
            </button>
            <a href="{% url 'complaints:complaint_list' %}" class="btn btn-sm btn-primary">
                <i class="bi bi-list"></i> View All
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        {% if data %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th width="40"><input type="checkbox" class="form-check-input select-all"></th>
                        <th>Ref #</th>
                        <th>Source</th>
                        <th>Title</th>
                        <th>Patient</th>
                        <th>Hospital</th>
                        <th>Department</th>
                        <th>Severity</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for complaint in data %}
                    <tr class="{% if complaint.is_overdue %}table-danger{% endif %}">
                        <td>
                            <input type="checkbox" class="form-check-input bulk-checkbox" value="{{ complaint.id }}">
                        </td>
                        <td>
                            <a href="{% url 'complaints:complaint_detail' complaint.id %}" class="text-decoration-none">
                                <code>{{ complaint.reference_number }}</code>
                            </a>
                        </td>
                        <td>
                            {% if complaint.source %}
                                <span class="badge bg-info" title="PX Source: {{ complaint.source.name_en }}">
                                    <i class="bi bi-cloud-arrow-down"></i> {{ complaint.source.name_en|truncatechars:12 }}
                                </span>
                            {% elif complaint.complaint_source_type == 'internal' %}
                                <span class="badge bg-primary" title="Internal">
                                    <i class="bi bi-building"></i> Internal
                                </span>
                            {% else %}
                                <span class="badge bg-secondary" title="External">
                                    <i class="bi bi-person"></i> Patient
                                </span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'complaints:complaint_detail' complaint.id %}" class="text-decoration-none">
                                {{ complaint.title|truncatewords:8 }}
                            </a>
                            {% if complaint.is_overdue %}
                            <span class="badge bg-danger ms-1">OVERDUE</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if complaint.patient %}
                            {{ complaint.patient.get_full_name }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>{{ complaint.hospital.name }}</td>
                        <td>{{ complaint.department.name }}</td>
                        <td>
                            <span class="badge bg-{{ complaint.get_severity_color }}">{{ complaint.get_severity_display }}</span>
                        </td>
                        <td>
                            <span class="badge bg-{{ complaint.get_status_color }}">{{ complaint.get_status_display }}</span>
                        </td>
                        <td>
                            {% if complaint.due_date %}
                            {{ complaint.due_date|date:"M d, Y" }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'complaints:complaint_detail' complaint.id %}" class="btn btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if data.has_other_pages %}
        <div class="card-footer">
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">
                    Showing {{ data.start_index }} to {{ data.end_index }} of {{ data.paginator.count }}
                </small>
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-sm mb-0">
                        {% if data.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page_complaints=1&tab=complaints&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
                                <i class="bi bi-chevron-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page_complaints={{ data.previous_page_number }}&tab=complaints&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-double-left"></i></span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                        </li>
                        {% endif %}
                        
                        <li class="page-item active">
                            <span class="page-link">{{ data.number }}</span>
                        </li>
                        
                        {% if data.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page_complaints={{ data.next_page_number }}&tab=complaints&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page_complaints={{ data.paginator.num_pages }}&tab=complaints&date_range={{ request.GET.date_range }}&search={{ request.GET.search }}&status={{ request.GET.status }}&priority={{ request.GET.priority }}">
                                <i class="bi bi-chevron-double-right"></i>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-double-right"></i></span>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
        {% endif %}
        {% else %}
        <div class="p-4 text-center text-muted">
            <i class="bi bi-inbox fs-1"></i>
            <p class="mt-2">No complaints found</p>
        </div>
        {% endif %}
    </div>
</div>