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

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>Our 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">Staff</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 Team</h2>
            <div class="title-bar mx-auto"></div>
            <p class="text-muted mt-3">Our dedicated administrative and support staff are here to help you.</p>
        </div>
        <div class="row">
            {% for member in staff %}
            <div class="col-lg-3 col-md-4 col-6 mb-4" data-aos="fade-up">
                <div class="faculty-card staff-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"></i></div>
                    {% endif %}
                    <h5>{{ member.name }}</h5>
                    <p class="text-accent fw-600 small mb-1">{{ member.title }}</p>
                    <p class="text-muted small mb-2">{{ member.department }}</p>
                    <div class="staff-contact mt-2">
                        {% if member.email %}
                        <a href="mailto:{{ member.email }}" class="staff-contact-link" title="Email">
                            <i class="fas fa-envelope"></i>
                        </a>
                        {% endif %}
                        {% if member.phone %}
                        <a href="tel:{{ member.phone }}" class="staff-contact-link" title="Phone">
                            <i class="fas fa-phone"></i>
                        </a>
                        {% endif %}
                        {% if member.whatsapp %}
                        <a href="https://wa.me/{{ member.whatsapp|slice:'1:' }}" target="_blank" class="staff-contact-link whatsapp" title="WhatsApp">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        {% endif %}
                        {% if member.linkedin_url %}
                        <a href="{{ member.linkedin_url }}" target="_blank" class="staff-contact-link linkedin" title="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        {% endif %}
                    </div>
                </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">Staff information coming soon.</h4>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}