{% extends 'base.html' %}

{% block title %}{{ instructor.name }} - Academic Excellence{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 p-4 text-center mb-4">
                {% if instructor.photo_url %}
                    <img src="{{ instructor.photo_url }}" class="rounded-circle mx-auto mb-4" width="180" height="180" style="object-fit: cover; border: 5px solid var(--light-gray);">
                {% endif %}
                <h2 class="fw-bold mb-1">{{ instructor.name }}</h2>
                <p class="text-primary fw-medium mb-3">{{ instructor.title }}</p>
                <div class="d-flex justify-content-center gap-3">
                    <span class="badge bg-secondary bg-opacity-10 text-secondary px-3 py-2 rounded-pill">{{ instructor.expertise }}</span>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <h3 class="display-6 mb-4">Biography</h3>
            <div class="lead text-muted mb-5">
                {{ instructor.bio|linebreaks }}
            </div>

            <h3 class="mb-4">Courses by {{ instructor.name }}</h3>
            <div class="row g-4">
                {% for course in instructor.courses.all %}
                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                        <div class="card-body p-4">
                            <span class="badge bg-primary bg-opacity-10 text-primary mb-2">{{ course.level }}</span>
                            <h5 class="card-title fw-bold mb-3">{{ course.title }}</h5>
                            <a href="{% url 'course_detail' course.slug %}" class="btn btn-link text-decoration-none p-0 fw-bold">View Course &rarr;</a>
                        </div>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted">No courses listed yet.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}