{% extends 'main/base.html' %}
{% block title %}Faculty & Staff - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>Faculty & Staff</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item active">Faculty</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <h2 class="section-title">Meet Our Faculty</h2>
            <div class="title-bar mx-auto"></div>
            <p class="text-muted mt-3">Our dedicated team of experienced educators and industry professionals.</p>
        </div>
        <div class="row">
            {% for member in faculty %}
            <div class="col-lg-3 col-md-4 col-6 mb-4" data-aos="fade-up">
                <div class="faculty-card">
                    {% if member.photo %}
                    <img src="{{ member.photo.url }}" alt="{{ member.name }}" class="faculty-photo">
                    {% else %}
                    <div class="faculty-placeholder"><i class="fas fa-user-tie"></i></div>
                    {% endif %}
                    <h5>{{ member.title }} {{ member.name }}</h5>
                    <p class="text-accent fw-600 small mb-1">{{ member.position }}</p>
                    <p class="text-muted small mb-2">{{ member.department }}</p>
                    {% if member.email %}
                    <a href="mailto:{{ member.email }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-envelope me-1"></i>Contact
                    </a>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-users fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">Faculty information coming soon.</h4>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}