{% extends "base.html" %}

{% block title %}{{ gallery_title | default('Shape Gallery') }}{% endblock %}

{% block content %}
<div class="card">
    <h2 class="card-title">{{ gallery_title | default('Shape Gallery') }}</h2>
    
    {% if gallery_description %}
    <div class="info-box mb-lg">
        {{ gallery_description | safe }}
    </div>
    {% endif %}
    
    <!-- Search/Filter -->
    {% if show_search | default(true) %}
    <div class="mb-lg">
        <input type="text" 
               id="gallery-search" 
               class="form-control" 
               placeholder="Search shapes..."
               style="width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    {% endif %}
    
    <!-- Gallery Grid -->
    <div class="gallery-grid">
        {% for item in gallery_items %}
        <div class="gallery-item" data-shape="{{ item.shape }}">
            <h3 class="gallery-item-title">{{ item.title }}</h3>
            
            {% if item.comparison %}
            <!-- Comparison view for safe mode on/off -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div class="text-center">
                    <div class="mb-sm text-muted" style="font-size: 0.875rem;">Safe Mode ON</div>
                    <div class="safe-mode-on" style="padding: 5px; border-radius: 4px;">
                        {% if item.safe_on_svg %}
                            {{ item.safe_on_svg | safe }}
                        {% else %}
                            <img src="{{ item.safe_on_path }}" alt="{{ item.title }} - Safe Mode ON" style="width: 100%; height: auto;">
                        {% endif %}
                    </div>
                </div>
                
                <div class="text-center">
                    <div class="mb-sm text-muted" style="font-size: 0.875rem;">Safe Mode OFF</div>
                    <div class="safe-mode-off" style="padding: 5px; border-radius: 4px;">
                        {% if item.safe_off_svg %}
                            {{ item.safe_off_svg | safe }}
                        {% else %}
                            <img src="{{ item.safe_off_path }}" alt="{{ item.title }} - Safe Mode OFF" style="width: 100%; height: auto;">
                        {% endif %}
                    </div>
                </div>
            </div>
            {% else %}
            <!-- Single view -->
            <div class="text-center">
                {% if item.svg_content %}
                    {{ item.svg_content | safe }}
                {% else %}
                    <img src="{{ item.path }}" alt="{{ item.title }}" style="width: 100%; height: auto;">
                {% endif %}
            </div>
            {% endif %}
            
            {% if item.description %}
            <p class="text-muted mt-md" style="font-size: 0.875rem;">{{ item.description }}</p>
            {% endif %}
            
            {% if item.config %}
            <details class="mt-md">
                <summary style="cursor: pointer; color: var(--primary-color); font-size: 0.875rem;">View Config</summary>
                <pre style="font-size: 0.75rem; background: #f5f5f5; padding: 8px; border-radius: 4px; margin-top: 8px;">{{ item.config | tojson(indent=2) }}</pre>
            </details>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<style>
.mb-sm { margin-bottom: 8px; }
.gallery-item img,
.gallery-item svg {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
}
</style>
{% endblock %}