{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
    <div class="container p-4">
        <!-- Add Course Button -->
        <div class="mb-4">
            <a href="{% url 'admin:app_academicyear_add' %}" class="button">
                <button type="button" class="btn btn-primary">Add New Academic Year</button>
            </a>
        </div>
        <!-- Course List Table -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>S.N</th>
                    <th>Year</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for academic_year in academic_years %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ academic_year.year }}</td>
                        <td>
                            <a href="{% url 'admin:app_academicyear_change' academic_year.id %}"
                               class="button btn-edit">
                                <button type="button" class="btn btn-warning btn-sm">Edit</button>
                            </a>
                            <a href="{% url 'admin:app_academicyear_delete' academic_year.year %}"
                               class="button btn-delete">
                                <button type="button" class="btn btn-danger btn-sm">Delete</button>
                            </a>
                        </td> 
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No academic years found.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <style>
    .btn {
        padding: 6px 12px;
        margin: 0 4px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .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 {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
        background-color: white;
    }
    .table th,
    .table td {
        padding: 12px;
        border: 1px solid #dee2e6;
    }
    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }
    .container {
        padding: 20px;
    }
    </style>
{% endblock %}