{% extends "base.html" %}
{% block title %}Subjects - Admin - A+ Academy{% endblock %}
{% block extra_css %}
<style>
.admin-sidebar { background: white; border-radius: 20px; box-shadow: var(--soft-shadow); padding: 1.5rem; height: calc(100vh - 140px); position: sticky; top: 100px; }
.admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text-dark); text-decoration: none; border-radius: 10px; margin-bottom: 8px; transition: all 0.3s ease; }
.admin-nav-link:hover, .admin-nav-link.active { background: rgba(37, 99, 235, 0.1); color: var(--primary-blue); }
</style>
{% endblock %}
{% block content %}
<section style="padding: 120px 0 40px;">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-3">
                <div class="admin-sidebar">
                    <div class="d-flex align-items-center gap-2 mb-4 pb-3 border-bottom">
                        <i class="bi bi-person-circle text-primary fs-4"></i>
                        <div><div class="fw-bold">{{ current_user.username }}</div><small class="text-muted">Administrator</small></div>
                    </div>
                    <nav>
                        <a href="{{ url_for('admin.dashboard') }}" class="admin-nav-link"><i class="bi bi-speedometer2"></i> Dashboard</a>
                        <a href="{{ url_for('admin.messages') }}" class="admin-nav-link"><i class="bi bi-envelope"></i> Messages</a>
                        <a href="{{ url_for('admin.content') }}" class="admin-nav-link"><i class="bi bi-file-text"></i> Site Content</a>
                        <a href="{{ url_for('admin.admin_subjects') }}" class="admin-nav-link active"><i class="bi bi-book"></i> Subjects</a>
                        <div class="border-top my-3"></div>
                        <a href="{{ url_for('admin.logout') }}" class="admin-nav-link text-danger"><i class="bi bi-box-arrow-right"></i> Logout</a>
                    </nav>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">Manage Subjects</h4>
                    <a href="{{ url_for('admin.add_subject') }}" class="soft-btn btn-sm"><i class="bi bi-plus-lg"></i> Add Subject</a>
                </div>
                <div class="soft-card p-0 overflow-hidden">
                    {% if subjects %}
                    <div class="table-responsive">
                        <table class="table table-hover rounded mb-0">
                            <thead class="text-uppercase small" style="background: rgba(0, 123, 255, 0.52);">
                                <tr><th>Order</th><th>Subject</th><th>Code</th><th>Grade</th><th>Status</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                {% for subject in subjects %}
                                <tr class="{{ 'table-secondary' if not subject.is_active else '' }}">
                                    <td>{{ subject.display_order }}</td>
                                    <td><div class="d-flex align-items-center gap-2"><i class="bi {{ subject.icon }} text-primary"></i><span class="fw-semibold">{{ subject.name }}</span></div></td>
                                    <td><code>{{ subject.code }}</code></td>
                                    <td>{% if subject.grade_level == 'rewrite' %}<span class="badge bg-warning text-dark">Rewrite</span>{% else %}<span class="badge bg-info">Grade {{ subject.grade_level }}</span>{% endif %}</td>
                                    <td>
                                        <form method="POST" action="{{ url_for('admin.toggle_subject', subject_id=subject.id) }}" class="d-inline">
                                            <button type="submit" class="btn btn-sm {{ 'btn-success' if subject.is_active else 'btn-secondary' }}">{{ 'Active' if subject.is_active else 'Inactive' }}</button>
                                        </form>
                                    </td>
                                    <td class="d-flex gap-2 border border-left">
                                        <a href="{{ url_for('admin.edit_subject', subject_id=subject.id) }}" class="btn btn-sm btn-primary"><i class="bi bi-pencil"></i></a>
                                        <form method="POST" action="{{ url_for('admin.delete_subject', subject_id=subject.id) }}" class="d-inline" onsubmit="return confirm('Are you sure?');">
                                            <button type="submit" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-book text-muted fs-1"></i>
                        <p class="mt-2 text-muted">No subjects yet</p>
                        <a href="{{ url_for('admin.add_subject') }}" class="soft-btn btn-sm">Add First Subject</a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}