{% extends 'base.html' %}
{% block title %}BUSA Officials{% endblock %}

{% block content %}

<div class="container py-5">

    <h3 class="fw-bold text-success text-center mb-5">
        BUSA Officials
    </h3>

    {% if officials %}
        <div class="row g-4">

            {% for official in officials %}
            <div class="col-md-4 col-sm-6">

                <div class="card shadow-sm border-0 h-100 text-center">

                    {% if official.image %}
                        <img src="{{ official.image.url }}"
                        class="card-img-top"
                        style="height: 300px; object-fit: contain; background-color: #f8f9fa;">
                    {% else %}
                        <div class="d-flex align-items-center justify-content-center bg-light"
                             style="height: 250px;">
                            <i class="fas fa-user fa-3x text-muted"></i>
                        </div>
                    {% endif %}

                    <div class="card-body">

                        <h5 class="fw-bold mb-1">
                            {{ official.name }}
                        </h5>

                        <p class="text-success fw-semibold mb-2">
                            {{ official.get_position_display }}
                        </p>

                        {% if official.description %}
                            <p class="text-muted small">
                                {{ official.description }}
                            </p>
                        {% endif %}

                    </div>

                </div>

            </div>
            {% endfor %}

        </div>
    {% else %}

        <div class="alert alert-info text-center">
            No officials have been added yet.
        </div>

    {% endif %}

</div>

{% endblock %}