{% extends "base.html" %}
{% block title %}Teacher Dashboard{% endblock %}
{% block nav_teacher %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2>Welcome, {{ user.first_name }}!</h2>
        <p class="text-muted mb-0">
            {% if program_count %}
                Teaching {{ program_count }} program{{ program_count|pluralize }}
            {% else %}
                No programs assigned yet
            {% endif %}
        </p>
    </div>
</div>

{% if not programs %}
<div class="alert alert-warning">
    <i class="fa-solid fa-triangle-exclamation me-2"></i>
    You have not been assigned to any programs yet. Please contact the admin to set up your profile.
</div>
{% else %}

<!-- Stats Row -->
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon" style="background: rgba(10,61,98,0.1); color: var(--color-primary);">
                <i class="fa-solid fa-layer-group"></i>
            </div>
            <div>
                <div class="stat-value">{{ program_count }}</div>
                <div class="stat-label">My Programs</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="{% url 'portal:teacher_courses' %}" class="text-decoration-none">
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(244,180,0,0.1); color: var(--color-secondary);">
                    <i class="fa-solid fa-book-open"></i>
                </div>
                <div>
                    <div class="stat-value">{{ course_count }}</div>
                    <div class="stat-label">Courses</div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="{% url 'portal:teacher_students' %}" class="text-decoration-none">
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(40,167,69,0.1); color: #28a745;">
                    <i class="fa-solid fa-users"></i>
                </div>
                <div>
                    <div class="stat-value">{{ student_count }}</div>
                    <div class="stat-label">My Students</div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="{% url 'portal:teacher_timetable' %}" class="text-decoration-none">
            <div class="stat-card">
                <div class="stat-icon" style="background: rgba(33,150,243,0.1); color: #2196f3;">
                    <i class="fa-solid fa-calendar-days"></i>
                </div>
                <div>
                    <div class="stat-value"><i class="fa-solid fa-calendar-check"></i></div>
                    <div class="stat-label">Timetable</div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Today's Schedule -->
    <div class="col-lg-7">
        <div class="portal-card h-100">
            <div class="portal-card-header">
                <h5 class="mb-0">
                    <i class="fa-solid fa-calendar-day me-2"></i>Today — {{ today_name }}
                </h5>
            </div>
            <div class="portal-card-body p-0">
                {% if today_entries %}
                    {% for entry in today_entries %}
                    <div class="d-flex align-items-center gap-3 px-3 py-3
                        {% if not forloop.last %}border-bottom{% endif %}">
                        <div class="text-center flex-shrink-0" style="min-width:70px;">
                            <div class="fw-bold text-primary" style="font-size:0.9rem;">
                                {{ entry.start_time|time:"H:i" }}
                            </div>
                            <div class="text-muted" style="font-size:0.75rem;">
                                {{ entry.end_time|time:"H:i" }}
                            </div>
                        </div>
                        <div style="width:3px;height:40px;background:var(--color-secondary);border-radius:2px;flex-shrink:0;"></div>
                        <div class="flex-grow-1">
                            <div class="fw-semibold">{{ entry.display_name }}</div>
                            <div class="text-muted small">
                                {{ entry.program.name }}
                                {% if entry.venue %}&nbsp;·&nbsp; <i class="fa-solid fa-location-dot"></i> {{ entry.venue }}{% endif %}
                            </div>
                        </div>
                        <span class="badge bg-secondary-subtle text-secondary-emphasis">
                            {{ entry.get_year_display }}
                        </span>
                    </div>
                    {% endfor %}
                {% elif today_name == 'Sunday' %}
                <div class="text-center py-4 text-muted small">
                    <i class="fa-solid fa-couch fa-2x mb-2 d-block"></i>
                    No classes on Sunday. Enjoy your rest!
                </div>
                {% else %}
                <div class="text-center py-4 text-muted small">
                    <i class="fa-solid fa-calendar-xmark fa-2x mb-2 d-block"></i>
                    No classes scheduled for today.
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- My Programs -->
    <div class="col-lg-5">
        <div class="portal-card h-100">
            <div class="portal-card-header">
                <h5 class="mb-0">
                    <i class="fa-solid fa-layer-group me-2"></i>My Programs
                </h5>
            </div>
            <div class="portal-card-body p-0">
                {% for prog in programs %}
                <div class="px-3 py-3 {% if not forloop.last %}border-bottom{% endif %}">
                    <div class="fw-semibold small">{{ prog.name }}</div>
                    <div class="d-flex justify-content-between mt-1">
                        <span class="text-muted" style="font-size:0.8rem;">
                            {{ prog.get_level_display }}
                        </span>
                        <span class="text-muted" style="font-size:0.8rem;">
                            {{ prog.duration }}
                        </span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endif %}
{% endblock %}