{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Teacher Dashboard" %} - EduPlatform{% endblock %}

{% block content %}
<div class="container" style="margin-top: 100px; margin-bottom: 50px;">
    <!-- Welcome Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold">{% trans "Welcome, Teacher" %} <span style="color: var(--primary-color);">{{ user.last_name|default:user.username }}</span>! 👨‍🏫</h2>
            <p class="text-muted">{% trans "Manage your classes and students here." %}</p>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar / Profile Card -->
        <div class="col-lg-4 mb-4">
            <div class="glass-card h-100 text-center">
                <div class="mb-3 position-relative d-inline-block">
                    {% if teacher_profile.avatar %}
                        <img src="{{ teacher_profile.avatar.url }}" alt="Avatar" class="rounded-circle img-thumbnail" style="width: 150px; height: 150px; object-fit: cover;">
                    {% else %}
                        <div class="rounded-circle bg-light d-flex align-items-center justify-content-center mx-auto" style="width: 150px; height: 150px;">
                            <span class="text-muted display-4">{{ user.first_name|first|upper }}</span>
                        </div>
                    {% endif %}
                </div>

                <h4 class="fw-bold mb-1">{{ user.get_full_name|default:user.username }}</h4>
                <p class="text-muted mb-2">{{ teacher_profile.specialization|default:"Teacher" }}</p>

                <hr class="my-4">

                <div class="text-start">
                     <h6 class="fw-bold mb-2">{% trans "Bio" %}</h6>
                     <p class="text-muted small">
                         {{ teacher_profile.bio|default:"No bio provided yet." }}
                     </p>
                </div>
                
                <div class="mt-4">
                     <a href="#" class="btn btn-outline-primary w-100 rounded-pill">{% trans "Edit Profile" %}</a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Stats Row -->
            <div class="row mb-4">
                <div class="col-md-6 mb-3 mb-md-0">
                    <div class="glass-card py-3 px-4 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted mb-0">{% trans "Subjects Taught" %}</h6>
                            <h2 class="fw-bold mb-0 text-primary">{{ subjects.count }}</h2>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-collection" viewBox="0 0 16 16">
                              <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <!-- Placeholder for future stats like "Total Students" -->
                <div class="col-md-6">
                    <div class="glass-card py-3 px-4 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted mb-0">{% trans "Status" %}</h6>
                            <h5 class="fw-bold mb-0 text-success">Active</h5>
                        </div>
                         <div class="bg-success bg-opacity-10 p-3 rounded-circle text-success">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-badge" viewBox="0 0 16 16">
                              <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                              <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- My Subjects Section -->
            <div class="mb-4">
                <h4 class="fw-bold mb-3">{% trans "My Classes" %}</h4>
                {% if subjects %}
                <div class="row g-4">
                    {% for subject in subjects %}
                    <div class="col-md-6">
                        <div class="glass-card p-0 overflow-hidden h-100">
                             {% if subject.image %}
                                <div style="height: 150px; overflow: hidden;">
                                    <img src="{{ subject.image.url }}" class="w-100 h-100 object-fit-cover" alt="{{ subject.name_en }}">
                                </div>
                            {% else %}
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted">{% trans "No Image" %}</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ subject.name_en }}</h5>
                                <p class="text-muted small mb-2 text-truncate">{{ subject.description_en }}</p>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                     <span class="badge bg-info bg-opacity-10 text-info">
                                        {{ subject.classroom.name_en }}
                                    </span>
                                    <span class="text-muted small">
                                        {{ subject.subscribers.count }} {% trans "Students" %}
                                    </span>
                                </div>
                                <div class="mt-3 d-grid gap-2">
                                    <a href="{% url 'live_classroom' subject.id %}" class="btn btn-sm btn-danger rounded-pill">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-fill me-2" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.461a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"/>
                                        </svg>
                                        {% trans "Start Live Class" %}
                                    </a>
                                    <a href="{% url 'subject_detail' subject.id %}" class="btn btn-sm btn-primary rounded-pill">{% trans "Manage Class" %}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="glass-card text-center py-5">
                    <h5 class="text-muted">{% trans "You are not assigned to any subjects yet." %}</h5>
                    <p class="text-muted small">{% trans "Contact the administrator to assign classes." %}</p>
                </div>
                {% endif %}
            </div>

        </div>
    </div>
</div>
{% endblock %}