{% extends "admin/base_site.html" %}
{% block content %}
    <div class="container p-4">
        <!-- Add Subject Button -->
        <div class="mb-4">
            <a href="{% url 'admin:app_subject_add' %}" class="btn btn-primary">Add New Subject</a>
        </div>
        <!-- Filter Form -->
        <form method="get" class="mb-4">
            <!-- Course Filter -->
            <div class="form-group">
                <label for="course" class="form-label">Course</label>
                <select name="course" id="course" class="form-control">
                    <option value="">Select Course</option>
                    {% for course in courses %}
                        <option value="{{ course.id }}"
                                {% if selected_course|stringformat:"s" == course.id|stringformat:"s" %}selected{% endif %}>
                            {{ course.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <!-- Period Filter -->
            <div class="form-group">
                <label for="semester_or_year_number" class="form-label">Period</label>
                <select name="semester_or_year_number"
                        id="semester_or_year_number"
                        class="form-control">
                    <option value="">Select Period</option>
                    {% for period in periods %}
                        <option value="{{ period.number }}"
                                {% if period.number == request.GET.semester_or_year_number %}selected{% endif %}>
                            {{ period.display }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-info">Filter</button>
        </form>
        <!-- Subject List Table -->
        <table class="table">
            <thead>
                <tr>
                    <th>S.N</th>
                    <th>Name</th>
                    <th>Course</th>
                    <th>Period</th>
                    <th>Teacher</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for subject in subjects %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.course.name }}</td>
                        <td>{{ subject.period_display }}</td>
                        <td>
                            {% if subject.teacher %}
                                {{ subject.teacher.name }}
                            {% else %}
                                <span class="text-muted">Not Assigned</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'admin:app_subject_change' subject.id %}"
                               class="btn btn-warning btn-sm">Edit</a>
                            <a href="{% url 'admin:app_subject_delete' subject.id %}"
                               class="btn btn-danger btn-sm">Delete</a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="6" class="text-center">No subjects found.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <style>
    .btn {
        padding: 6px 12px;
        margin: 0 4px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }
    .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;
        text-decoration: none;
    }
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.875rem;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
        background-color: white;
    }
    .table th,
    .table td {
        padding: 12px;
        border: 1px solid #dee2e6;
        vertical-align: middle;
    }
    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }
    .container {
        padding: 20px;
    }
    .text-muted {
        color: #6c757d;
    }
    .text-center {
        text-align: center;
    }
    .mb-4 {
        margin-bottom: 1.5rem;
    }
    </style>
{% endblock %}