{% extends "base.html" %}

{% block title %}{{ title }} - Five Cities Orchid Society{% endblock %}

{% block content %}
<!-- Members Collection Gallery -->
<div class="container-fluid py-4" style="background: linear-gradient(135deg, #4B79A1, #283E51);">
    
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-lg-8 mx-auto text-center">
            <h1 class="display-4 text-white mb-3">
                <i data-feather="users" class="me-3" style="color: #20c997;"></i>
                {{ title }}
            </h1>
            <p class="lead text-light">{{ members_info.description }}</p>
        </div>
    </div>

    <!-- Members Information Cards -->
    <div class="row mb-5">
        <div class="col-md-3 mb-3">
            <div class="card bg-dark border-success h-100">
                <div class="card-body">
                    <h5 class="card-title text-success">
                        <i data-feather="award" class="me-2"></i>Features
                    </h5>
                    <ul class="text-light small">
                        {% for feature in members_info.features %}
                        <li>{{ feature }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-dark border-info h-100">
                <div class="card-body">
                    <h5 class="card-title text-info">
                        <i data-feather="camera" class="me-2"></i>Photo Types
                    </h5>
                    <ul class="text-light small">
                        {% for type in members_info.photo_types %}
                        <li>{{ type }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-dark border-warning h-100">
                <div class="card-body">
                    <h5 class="card-title text-warning">
                        <i data-feather="heart" class="me-2"></i>Community
                    </h5>
                    <p class="card-text text-light small">
                        Passionate orchid enthusiasts sharing their growing journey with fellow society members.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-dark border-primary h-100">
                <div class="card-body">
                    <h5 class="card-title text-primary">
                        <i data-feather="bar-chart" class="me-2"></i>Collection
                    </h5>
                    <p class="card-text text-light">
                        <strong>{{ orchids.total }}</strong> member photos
                    </p>
                    <small class="text-muted">Society collection</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Special Members Info Box -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-success" role="alert">
                <h5 class="alert-heading">
                    <i data-feather="users" class="me-2"></i>Celebrating Our Growing Community
                </h5>
                <p>These photos represent the dedication and passion of Five Cities Orchid Society members. From first-time growers to seasoned experts, each image tells a story of successful orchid cultivation and the joy of sharing nature's beauty.</p>
            </div>
        </div>
    </div>

    <!-- Gallery Grid -->
    {% if orchids.items %}
    <div class="row">
        {% for orchid in orchids.items %}
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
            <div class="card bg-dark border-secondary h-100 orchid-card">
                <div class="position-relative">
                    {% if orchid.google_drive_id %}
                    <img src="/api/drive-photo/{{ orchid.google_drive_id }}" 
                         alt="{{ orchid.display_name }}" 
                         class="card-img-top" 
                         style="height: 250px; object-fit: cover;">
                    {% else %}
                    <img src="{{ orchid.image_url or '/static/images/orchid_placeholder.svg' }}" 
                         alt="{{ orchid.display_name }}" 
                         class="card-img-top" 
                         style="height: 250px; object-fit: cover;">
                    {% endif %}
                    
                    <!-- Member Badge -->
                    <span class="position-absolute top-0 end-0 badge bg-success m-2">
                        <i data-feather="users" class="me-1"></i>Member
                    </span>
                </div>
                
                <div class="card-body d-flex flex-column">
                    <h6 class="card-title text-white">{{ orchid.display_name }}</h6>
                    {% if orchid.scientific_name %}
                    <p class="card-text text-muted small fst-italic">{{ orchid.scientific_name }}</p>
                    {% endif %}
                    
                    <!-- Member submission indicator -->
                    <p class="card-text text-success small">
                        <i data-feather="users" class="me-1"></i>Member collection
                    </p>
                    
                    {% if orchid.photographer and orchid.photographer != 'FCOS Collection' %}
                    <p class="card-text text-info small">
                        <i data-feather="camera" class="me-1"></i>Photo by {{ orchid.photographer }}
                    </p>
                    {% endif %}
                    
                    {% if orchid.region %}
                    <p class="card-text text-warning small">
                        <i data-feather="map-pin" class="me-1"></i>{{ orchid.region }}
                    </p>
                    {% endif %}
                    
                    {% if orchid.growth_habit %}
                    <p class="card-text text-light small">
                        <i data-feather="leaf" class="me-1"></i>{{ orchid.growth_habit }}
                    </p>
                    {% endif %}
                    
                    <div class="mt-auto">
                        <a href="/orchid/{{ orchid.id }}" class="btn btn-outline-success btn-sm">
                            <i data-feather="eye" class="me-1"></i>View Details
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if orchids.pages > 1 %}
    <div class="row mt-4">
        <div class="col-12 d-flex justify-content-center">
            <nav>
                <ul class="pagination pagination-dark">
                    {% if orchids.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ orchids.prev_num }}">Previous</a>
                    </li>
                    {% endif %}
                    
                    {% for page_num in orchids.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != orchids.page %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    {% endif %}
                    {% endfor %}
                    
                    {% if orchids.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ orchids.next_num }}">Next</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    {% endif %}
    
    {% else %}
    <!-- No orchids found -->
    <div class="row">
        <div class="col-12 text-center">
            <div class="card bg-dark border-warning">
                <div class="card-body">
                    <h5 class="text-warning">No member orchids found</h5>
                    <p class="text-light">Members can submit their orchid photos to be featured in this gallery.</p>
                    <a href="/gallery" class="btn btn-primary">View All Orchids</a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Call to Action for Members -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-dark border-success">
                <div class="card-body text-center">
                    <h5 class="card-title text-success">
                        <i data-feather="camera" class="me-2"></i>Share Your Orchids
                    </h5>
                    <p class="card-text text-light">
                        Society members can submit their orchid photos to be featured in this gallery. 
                        Show off your growing achievements and inspire fellow orchid enthusiasts!
                    </p>
                    <a href="/upload" class="btn btn-success me-2">
                        <i data-feather="upload" class="me-1"></i>Submit Photos
                    </a>
                    <a href="/contact" class="btn btn-outline-success">
                        <i data-feather="mail" class="me-1"></i>Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to Galleries -->
    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="/gallery" class="btn btn-outline-light">
                <i data-feather="arrow-left" class="me-2"></i>Back to All Galleries
            </a>
        </div>
    </div>
</div>

<style>
.orchid-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.orchid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(32, 201, 151, 0.3);
}

.pagination-dark .page-link {
    background-color: #343a40;
    border-color: #495057;
    color: #fff;
}

.pagination-dark .page-item.active .page-link {
    background-color: #198754;
    border-color: #198754;
}

.pagination-dark .page-link:hover {
    background-color: #495057;
    border-color: #6c757d;
}
</style>

<script>
// Initialize Feather Icons
feather.replace();
</script>
{% endblock %}