{% extends "admin/base_site.html" %}
{% block content %}
    <div class="container p-4">
        <!-- Add Teacher Button -->
        <div class="mb-4">
            <a href="{% url 'admin:app_complaint_add' %}" class="btn btn-primary">
                <i class="fas fa-user-plus"></i> Add New Complaint
            </a>
        </div>
        <!-- Teachers List Table -->
        <table class="table table-striped text-center">
            <thead class="thead-dark">
                <tr>
                    <th>S.N</th>
                    <th>Subject</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for complaint in complaints %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ complaint.subject }}</td>
                        <td>{{ complaint.description }}</td>
                        <td>
                            <!-- Edit Button -->
                            <a href="{% url 'admin:app_complaint_change' complaint.id %}"
                               class="btn btn-warning btn-sm">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <!-- Delete Button -->
                            <a href="{% url 'admin:app_complaint_delete' complaint.id %}"
                               class="btn btn-danger btn-sm"
                               onclick="return confirm('Are you sure you want to delete this complaint?');">
                                <i class="fas fa-trash-alt"></i> Delete
                            </a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="8" class="text-center">No complaint found.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- Custom Styles -->
    <style>
    .btn {
        padding: 6px 12px;
        margin: 0 4px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
    }
    .btn-warning {
        background-color: #ffc107;
        color: black;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    .btn:hover {
        opacity: 0.8;
    }

    /* Table Styling */
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    .table th, .table td {
        padding: 12px;
        border: 1px solid #dee2e6;
    }
    .table thead th {
        background-color: #343a40;
        color: white;
    }
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #f8f9fa;
    }
    .table-hover tbody tr:hover {
        background-color: #f1f1f1;
    }
    .table-responsive {
        overflow-x: auto;
    }
    td,th {
        white-space: nowrap;
    }
    /* Print-Friendly Styles */
    @media print {
        .container {
            padding: 0;
        }
        .table th, .table td {
            padding: 8px;
        }
        .btn {
            display: none;
        }
    }

    /* Container Padding */
    .container {
        padding: 20px;
    }
    </style>
{% endblock %}