{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block title %}My Profile{% endblock %}
{% block nav_teacher_profile %}active{% endblock %}

{% block content %}
<div class="page-header">
    <h2><i class="fa-solid fa-user me-2"></i>My Profile</h2>
</div>

<div class="row g-4">
    <!-- Avatar / Info panel -->
    <div class="col-lg-4">
        <div class="portal-card text-center">
            <div class="portal-card-body">
                {% if user.profile_photo %}
                    <img src="{{ user.profile_photo.url }}" class="profile-avatar mb-3" alt="Profile Photo">
                {% else %}
                    <div class="profile-avatar-placeholder mx-auto mb-3">
                        {{ user.first_name|first|upper }}{{ user.last_name|first|upper }}
                    </div>
                {% endif %}
                <h5 class="mb-1">{{ user.get_full_name }}</h5>
                <p class="text-muted small mb-2">{{ user.email }}</p>
                <span class="badge" style="background:var(--color-secondary);color:#fff;">Teacher</span>
            </div>
        </div>

        {% if assigned_programs %}
        <div class="portal-card mt-3">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-layer-group me-2"></i>Assigned Programs</h6>
            </div>
            <div class="portal-card-body p-0">
                <ul class="list-group list-group-flush">
                    {% for prog in assigned_programs %}
                    <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                        <span class="small fw-semibold">{{ prog.name }}</span>
                        <span class="badge bg-light text-dark border small">{{ prog.level }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% else %}
        <div class="portal-card mt-3">
            <div class="portal-card-body text-center text-muted py-4">
                <i class="fa-solid fa-layer-group fa-2x mb-2 d-block" style="opacity:0.3;"></i>
                <p class="small mb-0">No programs assigned yet.<br>Contact admin to be assigned.</p>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Edit form -->
    <div class="col-lg-8">
        <div class="portal-card">
            <div class="portal-card-header">
                <h5 class="mb-0">Edit Profile</h5>
            </div>
            <div class="portal-card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {% crispy form %}
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}