{% extends 'schasite/base2.html' %}
{% load static  %}

{% block pagetitle %}
<title>Stonehedge Community Homeowners Association</title>
<style type="text/css">
/* Board Page Specific Styles */
.card-header h4 {
    font-size: 1.25rem;
}

.board-member-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--bs-success);
}

.committee-card {
    transition: transform 0.3s ease;
}

.committee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .board-member-img {
        width: 120px;
        height: 120px;
    }
}
</style>
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <!-- Board Information -->
        <div class="row justify-content-center mb-5">
            <div class="col-lg-10">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <h3 class="text-success mb-3">2025-2026 Stonehedge Community Homeowners Association Board</h3>
                        <p>The Stonehedge Community Homeowners Association is governed by a volunteer board of directors elected by the community members. Board members serve two-year terms and are responsible for overseeing the community's operations, finances, and enforcement of covenants.</p>
                    </div>
                </div>
            </div>
        </div>

        

        <!-- Board Members -->
        <div class="row g-4">
            {% for officer in officers %}
              {% if officer %}
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header bg-success text-white text-center py-3">
                            <h4 class="mb-0">{{ officer.position }}</h4>
                        </div>
                        <div class="card-body text-center">
                            <!--<img src="../images/board/john-smith.jpg" alt="John Smith" class="rounded-circle mb-3" width="150" height="150">-->
                            <h5 class="card-title">{{ officer.name }}</h5>
                            <!-- <p class="text-muted">Term: 2022-2024</p>
                            <p class="card-text">John has lived in Greenwood Estates since 2015 and brings 20 years of financial management experience to the board.</p> -->
                            <div class="d-flex justify-content-center">
                                <a href="mailto:{{ officer.email }}" class="btn btn-sm btn-outline-success me-2">
                                    <i class="bi bi-envelope"></i> Email
                                </a>
                                <!-- <a href="tel:+15551234567" class="btn btn-sm btn-outline-success">
                                    <i class="bi bi-telephone"></i> Call
                                </a> -->
                            </div>
                        </div>
                    </div>
                </div>
              {% else %}
              <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-header bg-success text-white text-center py-3">
                        <h4 class="mb-0">TBD</h4>
                    </div>
                    <div class="card-body text-center">
                        <!--<img src="../images/board/john-smith.jpg" alt="John Smith" class="rounded-circle mb-3" width="150" height="150">-->
                        <h5 class="card-title">TBD</h5>
                        <p class="text-muted">TBD</p>
                        <p class="card-text">TBD</p>
                    </div>
                </div>
            </div>
              {% endif %}
        
            {% endfor %}
            

        
    </div>
</main>
{% endblock %}