{% extends 'generic/supervisor_base.html' %}
{% load render_table from django_tables2 %}

{% block content %}
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4 mt-2">
        <div>
            <h2 class="mb-1">Supervisors</h2>
            <p class="text-muted mb-0">
                Manage registered course and educational supervisors, hospital sites, and trainees.
            </p>
        </div>
        <div class="text-md-end">
            <span class="badge bg-secondary rounded-pill px-3 py-2">
                Showing: {{ table.rows|length }}
            </span>
        </div>
    </div>

    <div class="card border-secondary bg-dark text-white shadow-sm mb-4">
        <div class="card-body p-0">
            <div id="table-div">
                <span id="manage-span">
                    {% render_table table %}
                </span>
            </div>
        </div>
    </div>

    {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
{% endblock %}

{% block js %}
    <style>
        .table {
            margin-bottom: 0 !important;
        }
        .table th, .table td {
            padding: 0.75rem 1rem !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .table thead th {
            background-color: rgba(0, 0, 0, 0.2) !important;
            color: #d3e9ff !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
        }
    </style>
{% endblock %}