{% extends "admin/base_site.html" %} {% block page_title %}{{ title }}
{%endblock %} {% load static %} {% block extrastyle %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<style>
    .page-header {
        background-color: #f8f9fa;
        padding: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #dee2e6;
    }

    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.5rem;
        border: none;
    }

    .table {
        margin-bottom: 0;
    }

    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        color: #495057;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.875rem;
    }

    .table td {
        vertical-align: middle;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease-in-out;
    }

    .btn-edit {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }

    .btn-edit:hover {
        background-color: #e0a800;
        border-color: #d39e00;
        color: #000;
    }

    .btn-delete {
        background-color: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

    .btn-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    .course-count {
        background-color: #e9ecef;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        color: #495057;
    }

    .empty-state {
        padding: 3rem;
        text-align: center;
        background-color: #f8f9fa;
        border-radius: 0.5rem;
    }

    .empty-state-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }

    .search-box {
        max-width: 300px;
    }
</style>
{% endblock %} {% block content %}
<div class="page-header">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="h3 mb-0">Course Management</h1>
            </div>
            <div class="col-auto">
                <span class="course-count me-3">
                    Total Courses: {{ courses|length }}
                </span>
                <a href="{% url 'add_course' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>Add New Course
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="card">
        <div class="card-body">
            <!-- Search and Filter -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="search-box">
                        <input type="text" class="form-control" id="courseSearch" placeholder="Search courses..." />
                    </div>
                </div>
            </div>

            {% if courses %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th width="5%">S.N</th>
                            <th width="30%">Course Name</th>
                            <th width="20%">Course Type</th>
                            <th width="25%">Duration</th>
                            <th width="20%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for course in courses %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ course.name }}</td>
                            <td>{{ course.get_course_type_display }}</td>
                            <td>
                                {{ course.duration }} {% if course.course_type == 'semester' %}
                                Semesters {% else %} Years {% endif %}
                            </td>
                            <td>
                                <a href="{% url 'edit_course' course.id %}" class="btn btn-action btn-edit me-2">
                                    <i class="fas fa-edit me-1"></i>Edit
                                </a>
                                <a href="{% url 'delete_course' course.id %}" class="btn btn-action btn-delete">
                                    <i class="fas fa-trash-alt me-1"></i>Delete
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fas fa-book empty-state-icon"></i>
                <h3>No Courses Found</h3>
                <p class="text-muted">
                    Start by adding your first course using the button above.
                </p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% block extrajs %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document
        .getElementById("courseSearch")
        .addEventListener("keyup", function () {
            const searchText = this.value.toLowerCase();
            const tableRows = document.querySelectorAll("tbody tr");

            tableRows.forEach((row) => {
                const courseName = row.cells[1].textContent.toLowerCase();
                const courseType = row.cells[2].textContent.toLowerCase();

                if (
                    courseName.includes(searchText) ||
                    courseType.includes(searchText)
                ) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });
        });
</script>
{% endblock %} {% endblock %}