{% extends "base.html" %}

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

{% block content %}
<!-- Fragrant Orchids Gallery -->
<div class="container-fluid py-4" style="background: linear-gradient(135deg, #667eea, #764ba2);">
    
    <!-- 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="wind" class="me-3" style="color: #ffd700;"></i>
                {{ title }}
            </h1>
            <p class="lead text-light">{{ fragrance_info.description }}</p>
        </div>
    </div>

    <!-- Fragrance Information Cards -->
    <div class="row mb-5">
        <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="star" class="me-2"></i>Fragrance Types
                    </h5>
                    <ul class="text-light small">
                        {% for type in fragrance_info.fragrance_types %}
                        <li>{{ type }}</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="clock" class="me-2"></i>Peak Times
                    </h5>
                    <ul class="text-light small">
                        {% for time in fragrance_info.peak_times %}
                        <li>{{ time }}</li>
                        {% endfor %}
                    </ul>
                </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="flower-2" class="me-2"></i>Fragrant Genera
                    </h5>
                    <ul class="text-light small">
                        {% for genus in fragrance_info.common_fragrant_genera %}
                        <li>{{ genus }}</li>
                        {% endfor %}
                    </ul>
                </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> fragrant orchids
                    </p>
                    <small class="text-muted">Scented species</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Special Fragrance Info Box -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-warning" role="alert">
                <h5 class="alert-heading">
                    <i data-feather="wind" class="me-2"></i>The Science of Orchid Fragrance
                </h5>
                <p>Orchid fragrances are complex chemical cocktails designed to attract specific pollinators. Many release their strongest scent during peak pollinator activity times, often in early morning or evening hours.</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 %}
                    
                    <!-- Fragrant Badge -->
                    <span class="position-absolute top-0 end-0 badge bg-warning text-dark m-2">
                        <i data-feather="wind" class="me-1"></i>Fragrant
                    </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 %}
                    
                    <!-- Fragrance indicator -->
                    <p class="card-text text-warning small">
                        <i data-feather="wind" class="me-1"></i>Fragrant flowers
                    </p>
                    
                    {% if orchid.region %}
                    <p class="card-text text-success small">
                        <i data-feather="map-pin" class="me-1"></i>{{ orchid.region }}
                    </p>
                    {% endif %}
                    
                    {% if orchid.bloom_time %}
                    <p class="card-text text-info small">
                        <i data-feather="calendar" class="me-1"></i>{{ orchid.bloom_time }}
                    </p>
                    {% endif %}
                    
                    <div class="mt-auto">
                        <a href="/orchid/{{ orchid.id }}" class="btn btn-outline-warning 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 fragrant orchids found</h5>
                    <p class="text-light">We're continuously adding more fragrant orchid species to our collection.</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, 215, 0, 0.3);
}

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

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

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

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