{% extends "base.html" %}

{% block content %}
<h1>Галерея работ</h1>
<p>Примеры работ, напечатанных на наших материалах:</p>

{% if gallery_items %}
<div class="gallery-grid">
    {% for item in gallery_items %}
    <div class="gallery-item">
        <img src="{{ url_for('static', filename='images/' + item.file) }}" 
             alt="{{ item.name }}"
             style="width: 100%; height: 250px; object-fit: cover; border-radius: 10px;">
        <p style="text-align: center; margin-top: 10px; font-weight: bold; color: #CD853F;">
            {{ item.name }}
        </p>
    </div>
    {% endfor %}
</div>
{% else %}
<p style="text-align: center; color: #999;">Фотографии пока не добавлены. Добавьте изображения в папку static/images/</p>
{% endif %}

<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.gallery-item {
    background: #FDF5E6;
    border-radius: 10px;
    padding: 1rem;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(205, 133, 63, 0.2);
}

.gallery-item img {
    transition: opacity 0.3s;
}

.gallery-item:hover img {
    opacity: 0.9;
}
</style>
{% endblock %}