{% extends "base.html" %}

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

{% block content %}
<!-- Madagascar Orchids Gallery -->
<div class="container-fluid py-4" style="background: linear-gradient(135deg, #2d1b69, #11998e);">
    
    <!-- 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="island" class="me-3" style="color: #ff6b6b;"></i>
                {{ title }}
            </h1>
            <p class="lead text-light">{{ country_info.description }}</p>
        </div>
    </div>

    <!-- Madagascar Information Cards -->
    <div class="row mb-5">
        <div class="col-md-3 mb-3">
            <div class="card bg-dark border-danger h-100">
                <div class="card-body">
                    <h5 class="card-title text-danger">
                        <i data-feather="thermometer" class="me-2"></i>Climate
                    </h5>
                    <p class="card-text text-light">{{ country_info.climate }}</p>
                </div>
            </div>
        </div>
        <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="map" class="me-2"></i>Regions
                    </h5>
                    <ul class="text-light small">
                        {% for region in country_info.regions %}
                        <li>{{ region }}</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="flower-2" class="me-2"></i>Endemic Genera
                    </h5>
                    <ul class="text-light small">
                        {% for genus in country_info.common_genera %}
                        <li>{{ genus }}</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="bar-chart" class="me-2"></i>Collection
                    </h5>
                    <p class="card-text text-light">
                        <strong>{{ orchids.total }}</strong> orchids from Madagascar
                    </p>
                    <small class="text-muted">Island endemics</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Special Madagascar Info Box -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <h5 class="alert-heading">
                    <i data-feather="star" class="me-2"></i>Madagascar: The Eighth Continent
                </h5>
                <p>Madagascar separated from the African continent 165 million years ago, allowing unique orchid evolution. Over 85% of its 1,000+ orchid species are found nowhere else on Earth, making it one of the world's most important orchid biodiversity hotspots.</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 %}
                    
                    <!-- Madagascar Badge -->
                    <span class="position-absolute top-0 end-0 badge bg-danger m-2">
                        <i data-feather="island" class="me-1"></i>Madagascar
                    </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 %}
                    
                    {% if orchid.region %}
                    <p class="card-text text-success small">
                        <i data-feather="map-pin" class="me-1"></i>{{ orchid.region }}
                    </p>
                    {% endif %}
                    
                    <!-- Endemic status -->
                    <p class="card-text text-warning small">
                        <i data-feather="award" class="me-1"></i>Island Endemic
                    </p>
                    
                    <div class="mt-auto">
                        <a href="/orchid/{{ orchid.id }}" class="btn btn-outline-danger 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 Madagascar orchids found</h5>
                    <p class="text-light">We're working to add more endemic orchids from this remarkable island.</p>
                    <a href="/gallery" class="btn btn-primary">View All Orchids</a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 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(255, 107, 107, 0.3);
}

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

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

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

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