{% extends "public/base.html" %}
{% block title %}Teaching | {{ profile.name if profile }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb"><a href="/">Home</a> / {{ profile.teaching_header or 'Teaching' }}</div>
    <h1 class="page-title">{{ profile.teaching_header or 'Teaching' }}</h1>
    <p class="page-subtitle">{{ profile.teaching_subheader or 'Courses Taught at Your Institution' }}</p>
</div>

<!-- Stats -->
<section class="mb-16">
    <div class="terminal-box p-6 border-cyan">
        <div class="flex justify-around text-center">
            <div>
                <p class="text-3xl font-bold text-cyan">{{ theory_courses|length + lab_courses|length }}+</p>
                <p class="text-white/40 text-xs">{{ profile.teaching_stat1_label or 'Courses Taught' }}</p>
            </div>
            <div>
                <p class="text-3xl font-bold text-pink">{{ profile.teaching_stat2_value or 'UG & PG' }}</p>
                <p class="text-white/40 text-xs">{{ profile.teaching_stat2_label or 'Levels' }}</p>
            </div>
            <div>
                <p class="text-3xl font-bold text-amber">{{ profile.teaching_stat3_value or '15+ Years' }}</p>
                <p class="text-white/40 text-xs">{{ profile.teaching_stat3_label or 'Teaching Experience' }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Theory Courses -->
{% if theory_courses %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-cyan/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.teaching_theory_title or
            'Theory_Courses' }}</h2>
    </div>
    <div class="grid md:grid-cols-2 gap-6">
        {% for course in theory_courses %}
        <div class="terminal-box p-6 {% if loop.index <= 3 %}border-{{ course.color }}{% endif %}">
            <div class="flex items-center gap-3 mb-3">
                <span class="text-{{ course.color }} text-2xl">
                    {% if 'Machine' in course.name %}🤖{% elif 'Data' in course.name %}📊{% elif 'Information' in
                    course.name %}🔍{% else %}📚{% endif %}
                </span>
                <div>
                    <h3 class="text-white font-bold">{{ course.name }}</h3>
                    <p class="text-{{ course.color }} text-xs">{{ course.level }} {{ course.course_type }}</p>
                </div>
            </div>
            {% if course.description %}
            <p class="text-white/50 text-sm">{{ course.description }}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Lab Courses -->
{% if lab_courses %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-pink/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.teaching_lab_title or
            'Lab_Courses' }}</h2>
    </div>
    <div class="grid md:grid-cols-3 gap-4">
        {% for course in lab_courses %}
        <div class="terminal-box p-4">
            <div class="flex items-center gap-2">
                <span class="text-{{ course.color }}">⚡</span>
                <span class="text-white text-sm">{{ course.name }}</span>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}
{% endblock %}