{% extends 'base.html' %}
{% block content %}


<h1 class="center">{{page.title}}</h1>
{{page.content|safe|format(request=request, page=page)}}


{% if page.gallery %}
<div class="gallery">
    {{page.gallery.files.max_count}}
    {{page.gallery.files.items|length}}
    {% for image in page.gallery.files.items if image.is_thumb %}
    <figure>
        <img
            src="{{image.url}}"
            alt="{{image.name}}"
        />
        <figcaption>
            {{image.group}}
            <a href="{{image.full_url}}" target="_blank">{{image.name}}</a>
            <button data-id="{{image.group}}/{{image.file_name}}.{{image.file_ext}}" onclick="deleteImg(event)" type="submit">Delete</button>
        </figcaption>
    </figure>
    {% endfor %}
<script>
    async function deleteImg(event) {
        const itemId = event.target.getAttribute('data-id');
        const response = await fetch(`/api/demo-uploads?file_id=${itemId}`, {
            method: 'DELETE',
            headers: {
              'Content-Type': 'application/json',
            }
          });
        if (response.ok) {
            alert('Item deleted successfully!');
        } else {
            const error = await response.text();
            console.error('Failed to delete:', error);
            alert('Failed to delete item.');
        }
    }
</script>
</div>
{% endif %}

{% endblock %}

{% block js %}
    {{super()}}
    {{ page.js }}
{% endblock %}