{% extends "base.html" %}

{% block title %}Galería de Imágenes{% endblock %}

{% block content %}

<h1 class="text-center my-4">🖼️ Galería de Tecnologías</h1>

<div class="row">
    {% for imagen in imagenes %}
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100 shadow-sm">
            <img src="{{ url_for('static', filename='img/' + imagen.archivo) }}" class="card-img-top"
                alt="{{ imagen.titulo }}"
                style="height: 200px; object-fit: contain; background: #f8f9fa; padding: 15px;">
            <div class="card-body">
                <h5 class="card-title">{{ imagen.titulo }}</h5>
                <p class="card-text">{{ imagen.descripcion }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<div class="text-center mt-4">
    <a href="{{ url_for('inicio') }}" class="btn btn-primary">Volver al directorio</a>
</div>

<!-- Video de ejemplo (opcional) -->
<div style="text-align: center; margin: 30px 0;">
    <video autoplay muted loop width="100%"
        style="max-width: 600px; border-radius: 8px; display: block; margin: 0 auto; background: #000;">
        <source src="{{ url_for('static', filename='video/presentacion.mp4') }}" type="video/mp4">
        Tu navegador no soporta la reproducción de videos.
    </video>
</div>

{% endblock %}