{% extends "base.html" %}

{% block title %}{{ teacher.get_full_name }} | Staff{% endblock %}
{% block nav_staff %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-chalkboard-user me-2"></i>{{ teacher.get_full_name }}</h2>
        <p class="text-muted mb-0">Teacher profile and program assignments</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{% url 'portal:staff_edit' teacher.pk %}" class="btn btn-primary">
            <i class="fa-solid fa-pen me-1"></i> Edit Assignments
        </a>
        <a href="{% url 'portal:staff_list' %}" class="btn btn-outline-secondary">
            <i class="fa-solid fa-arrow-left me-1"></i> Back
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Profile details -->
    <div class="col-lg-5">
        <div class="portal-card">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-user me-2"></i>Profile</h6>
            </div>
            <div class="portal-card-body">
                <div class="d-flex align-items-center gap-3 mb-4">
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:56px;height:56px;font-size:1.2rem;font-weight:600;">
                        {{ teacher.first_name|first|upper }}{{ teacher.last_name|first|upper }}
                    </div>
                    <div>
                        <h6 class="mb-0">{{ teacher.get_full_name }}</h6>
                        <p class="text-muted mb-0 small">{{ teacher.get_role_display }}</p>
                    </div>
                </div>
                <dl class="row mb-0 small">
                    <dt class="col-5 text-muted">Email</dt>
                    <dd class="col-7">{{ teacher.email }}</dd>
                    <dt class="col-5 text-muted">Phone</dt>
                    <dd class="col-7">{{ teacher.phone|default:"—" }}</dd>
                    <dt class="col-5 text-muted">Username</dt>
                    <dd class="col-7"><code>{{ teacher.username }}</code></dd>
                    <dt class="col-5 text-muted">Joined</dt>
                    <dd class="col-7">{{ teacher.date_joined|date:"d M Y" }}</dd>
                    {% if profile %}
                    <dt class="col-5 text-muted">Specialization</dt>
                    <dd class="col-7">{{ profile.specialization|default:"—" }}</dd>
                    <dt class="col-5 text-muted">Qualification</dt>
                    <dd class="col-7">{{ profile.qualification|default:"—" }}</dd>
                    {% endif %}
                </dl>
                {% if profile and profile.bio %}
                <div class="mt-3 pt-3 border-top small text-muted">{{ profile.bio }}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Assigned programs -->
    <div class="col-lg-7">
        <div class="portal-card">
            <div class="portal-card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="fa-solid fa-layer-group me-2"></i>Assigned Programs</h6>
                <a href="{% url 'portal:staff_edit' teacher.pk %}" class="btn btn-xs btn-outline-primary">
                    <i class="fa-solid fa-pen me-1"></i> Edit
                </a>
            </div>
            <div class="portal-card-body p-0">
                {% if assigned_programs %}
                <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">
                        <div>
                            <strong>{{ prog.name }}</strong>
                            <span class="text-muted small ms-2">{{ prog.get_level_display }}</span>
                        </div>
                        {% if prog.is_active %}
                        <span class="badge bg-success">Active</span>
                        {% else %}
                        <span class="badge bg-secondary">Inactive</span>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="p-4 text-center text-muted small">
                    No programs assigned yet.
                    <a href="{% url 'portal:staff_edit' teacher.pk %}">Assign programs.</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}