<!DOCTYPE html>
<html>
<head>
    <title>Pumpkin Gallery🎃</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='gallery_styles.css') }}">
</head>
<body>
    <div class="button-container">
        <a href="{{ url_for('gallery') }}" class="button">🤺🤺🤺</a>
        <a href="{{ url_for('dump') }}" class="button">🎃🎃🎃</a>
    </div>
    <h1>Pumpkin Gallery🎃</h1>
    <div class="gallery-container" style="flex-direction: row; flex-wrap: wrap;">
        {% for image in images %}
	<a href="{{ url_for('dump_file', filename=image) }}" data-original="{{ url_for('dump_file', filename=image) }}" target="_blank" style="flex: 1 0 25%;">
		    <img class="responsive-img loaded" src="{{ url_for('dump_file', filename=image) }}" alt="{{ image }}" style="max-width:33vw;">
            </a>
        {% endfor %}
    </div>
    <script>
	const images = document.querySelectorAll('.gallery-container a');
	images.forEach(image => {
	    image.addEventListener('click', (event) => {
		event.preventDefault();
		const original = image.getAttribute('data-original');
		window.open(original, '_blank');
	    });
	});
    </script>
</body>
</html>
