{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
<div class="container p-4">
    <div class="mb-4">
        <a href="{% url 'admin:app_student_add' %}" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> Add New Student
        </a>
    </div>
    <table class="table table-striped text-center">
        <thead class="thead-dark">
            <tr>
                <th>S.N</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Course</th>
                <th>Academic Year</th>
                <th>Father Name</th>
                <th>Mother Name</th>
                <th>Guardian</th>
                <th>Guardian's Phone</th>
                <th>Relation</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for student in students %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ student.first_name }} {{ student.middle_name|default:'' }} {{ student.last_name }}</td>
                    <td>{{ student.email }}</td>
                    <td>{{ student.phone }}</td>
                    <td>{{ student.course.name }}</td>
                    <td>{{ student.academic_year.year }}</td>
                    <td>{{ student.father_name }}</td>
                    <td>{{ student.mother_name }}</td>
                    <td>{{ student.guardian_name}}</td>
                    <td>{{ student.guardian_phone_no }}</td>
                    <td>{{ student.relationship_with_student }}</td>
                    <td>
                        <a href="{% url 'admin:app_student_change' student.id %}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i> View
                        </a>
                        <a href="{% url 'admin:app_student_delete' student.id %}" class="btn btn-danger btn-sm" 
                           onclick="return confirm('Are you sure you want to delete this student?');">
                            <i class="fas fa-trash-alt"></i> Delete
                        </a>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="7" class="text-center">No students found.</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <a href="#" class="btn btn-success" onclick="window.print();"><i class="fas fa-print"></i> Print PDF</a>
</div>

<style>
    /* Custom Button Styles */
    .btn {
        padding: 6px 12px;
        margin: 2px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
    }
    .btn-info {
        background-color: #17a2b8;
        color: white;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    .btn:hover {
        opacity: 0.8;
    }
    td,th {
        white-space: nowrap;
    }
    /* 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: #f2f2f2;
    }
    .table-responsive {
        overflow-x: auto;
    }

    /* Print Styles */
    @media print {
        .container {
            padding: 0;
        }
        .table th, .table td {
            padding: 8px;
        }
        .btn {
            display: none;
        }
    }

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

{% endblock %}