{% extends "base.html" %}
{% set page_title = "Edited Gallery - Orchid Continuum" %}

{% block content %}
<div class="container my-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="display-5 mb-3">
                        <i data-feather="grid" class="me-2"></i>Edited Gallery
                    </h1>
                    <p class="lead text-muted">
                        Browse all edited orchid photos and compare versions
                    </p>
                </div>
                <a href="{{ url_for('photo_editor.photo_editor_home') }}" class="btn btn-outline-secondary">
                    <i data-feather="arrow-left" class="me-1"></i>Back to Editor
                </a>
            </div>
        </div>
    </div>

    {% if error %}
    <div class="alert alert-danger" role="alert">
        <i data-feather="alert-circle" class="me-2"></i>{{ error }}
    </div>
    {% endif %}

    {% if edited_orchids %}
        <div class="row">
            {% for item in edited_orchids %}
            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0">{{ item.orchid.scientific_name or item.orchid.display_name or "Unknown Orchid" }}</h5>
                        <small class="text-muted">{{ item.edited_versions|length }} edited version{{ 's' if item.edited_versions|length != 1 else '' }}</small>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Original Photo -->
                            <div class="col-md-6">
                                <h6 class="text-muted">Original</h6>
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 200px;">
                                    {% if item.orchid.image_url %}
                                        <img src="{{ item.orchid.image_url }}" 
                                             class="img-fluid rounded" 
                                             alt="Original" 
                                             style="max-height: 180px;">
                                    {% else %}
                                        <i data-feather="image" class="text-muted" style="width: 48px; height: 48px;"></i>
                                    {% endif %}
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">Source: {{ item.orchid.ingestion_source or 'Upload' }}</small>
                                </div>
                            </div>

                            <!-- Latest Edited Version -->
                            <div class="col-md-6">
                                <h6 class="text-primary">Latest Edit</h6>
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 200px;">
                                    {% if item.latest_edit and item.latest_edit.url %}
                                        <img src="{{ item.latest_edit.url }}" 
                                             class="img-fluid rounded" 
                                             alt="Latest edit" 
                                             style="max-height: 180px;">
                                    {% else %}
                                        <div class="text-center">
                                            <i data-feather="edit-3" class="text-muted mb-2" style="width: 48px; height: 48px;"></i>
                                            <div class="small text-muted">Edited Version</div>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">
                                        {% if item.latest_edit %}
                                            Edited: {{ item.latest_edit.created_at[:10] }}
                                        {% endif %}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Edit Information -->
                        {% if item.latest_edit %}
                        <div class="mt-3">
                            <h6 class="small text-muted">Latest Modifications:</h6>
                            <div class="row">
                                {% if item.latest_edit.edit_history %}
                                    {% for edit in item.latest_edit.edit_history[-3:] %}
                                    <div class="col-auto">
                                        <span class="badge bg-secondary">{{ edit.operation|title }}</span>
                                    </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}

                        <!-- Actions -->
                        <div class="mt-3">
                            <div class="btn-group btn-group-sm w-100">
                                <a href="{{ url_for('photo_editor.create_editing_session', orchid_id=item.orchid.id) }}" 
                                   class="btn btn-primary">
                                    <i data-feather="edit-3" class="me-1"></i>Continue Editing
                                </a>
                                <a href="{{ url_for('photo_editor.compare_versions', orchid_id=item.orchid.id) }}" 
                                   class="btn btn-outline-secondary">
                                    <i data-feather="eye" class="me-1"></i>Compare All
                                </a>
                                <a href="{{ url_for('orchid_detail', id=item.orchid.id) }}" 
                                   class="btn btn-outline-info">
                                    <i data-feather="external-link" class="me-1"></i>View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination placeholder -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <p class="text-muted">Showing {{ edited_orchids|length }} edited orchids</p>
            </div>
        </div>

    {% else %}
        <div class="text-center py-5">
            <i data-feather="image" class="mb-3 text-muted" style="width: 96px; height: 96px;"></i>
            <h4 class="text-muted">No Edited Photos Yet</h4>
            <p class="text-muted">
                Start editing orchid photos to see your creative work in this gallery.
            </p>
            <a href="{{ url_for('photo_editor.photo_editor_home') }}" class="btn btn-primary btn-lg">
                <i data-feather="edit-3" class="me-2"></i>Start Editing Photos
            </a>
        </div>
    {% endif %}

    <!-- Gallery Features -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h5 class="mb-3">
                        <i data-feather="info" class="me-2"></i>Gallery Features
                    </h5>
                    <div class="row">
                        <div class="col-md-3">
                            <h6 class="text-primary">Version Control</h6>
                            <p class="small text-muted">
                                All original photos are preserved separately from edited versions, 
                                maintaining complete edit history.
                            </p>
                        </div>
                        <div class="col-md-3">
                            <h6 class="text-success">Quality Comparison</h6>
                            <p class="small text-muted">
                                Side-by-side comparison tools help you see the improvements 
                                made through editing.
                            </p>
                        </div>
                        <div class="col-md-3">
                            <h6 class="text-info">AI Analysis</h6>
                            <p class="small text-muted">
                                Each edited photo includes AI analysis data showing 
                                plant features and quality assessments.
                            </p>
                        </div>
                        <div class="col-md-3">
                            <h6 class="text-warning">Export Options</h6>
                            <p class="small text-muted">
                                Download individual versions or complete packages with 
                                metadata for professional use.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Initialize feather icons
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>
{% endblock %}