{% extends "base.html" %}
{% block title %}Subjects - A+ Academy{% endblock %}
{% block content %}
<section class="hero-section" style="padding: 140px 0 60px;">
    <div class="container text-center py-4 rounded-3 text-white" style="background: rgba(0, 123, 255, 0.1); max-width: 70%;">
        <span class="section-label bg-light">Our Programs</span>
        <h1 class="hero-title">Subjects We Offer</h1>
        <p class="hero-subtitle mx-auto" style="max-width: 750px;">Comprehensive tutoring for Grade 10-12 Science, CAT, and Matric Rewrite programs</p>
    </div>
</section>
<section class="py-4 bg-white border-bottom">
    <div class="container">
        <div class="d-flex flex-wrap justify-content-center gap-2">
            <a href="{{ url_for('main.subjects', grade='all') }}" class="btn {{ 'btn-primary' if grade_filter == 'all' else 'btn-outline-primary' }} rounded-pill px-4">All Subjects</a>
            <a href="{{ url_for('main.subjects', grade='10') }}" class="btn {{ 'btn-primary' if grade_filter == '10' else 'btn-outline-primary' }} rounded-pill px-4">Grade 10</a>
            <a href="{{ url_for('main.subjects', grade='11') }}" class="btn {{ 'btn-primary' if grade_filter == '11' else 'btn-outline-primary' }} rounded-pill px-4">Grade 11</a>
            <a href="{{ url_for('main.subjects', grade='12') }}" class="btn {{ 'btn-primary' if grade_filter == '12' else 'btn-outline-primary' }} rounded-pill px-4">Grade 12</a>
            <a href="{{ url_for('main.subjects', grade='rewrite') }}" class="btn {{ 'btn-primary' if grade_filter == 'rewrite' else 'btn-outline-warning' }} rounded-pill px-4">Rewrite/Upgrade</a>
            <a href="https://autotutor.streamlit.app" target="_blank" class="btn btn-danger rounded-pill px-4"><i class="bi bi-calculator"></i> PRACTICE MATHS <i class="bi bi-pencil"></i></a>
        </div>
    </div>
</section>
<section class="py-5">
    <div class="container py-5">
        {% if subjects %}
        <div class="row g-4">
            {% for subject in subjects %}
            <div class="col-md-6 col-lg-4">
                <div class="subject-card h-100">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="subject-icon" style="margin-bottom: 0;"><i class="bi {{ subject.icon }}"></i></div>
                        <span class="badge bg-{{ subject.color }} bg-opacity-10 text-{{ subject.color }}">{% if subject.grade_level == 'rewrite' %}Rewrite{% else %}Grade {{ subject.grade_level }}{% endif %}</span>
                    </div>
                    <h4 class="subject-title">{{ subject.name }}</h4>
                    <p class="subject-desc">{{ subject.description or 'Comprehensive tutoring with experienced educators.' }}</p>
                    <div class="mt-4 pt-3 border-top">
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted"><i class="bi bi-clock"></i> Flexible hours</small>
                            <a href="{{ url_for('main.contact') }}" class="text-primary fw-semibold text-decoration-none">Enroll <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-inbox text-muted" style="font-size: 4rem;"></i>
            <h4 class="mt-3 text-muted">No subjects found</h4>
            <p class="text-muted">Please check back later or contact us for more information.</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}