<% layout('layouts/base')%>

<div class="container">
    <h1 class="text-secondary">Gallery</h1>
    <div class="gallery-container p-4">
        <% for(let image of images) { %>
            <div class="thumbnail">
                <img data-bs-toggle="modal" data-bs-target="#image-detail-<%= image.id %>" src="uploads/<%= image.id %>" alt="<%= image.caption %>" class="gallery-image img-fluid mx-auto d-block rounded shadow" />
            </div>
            
            <div class="modal fade" id="image-detail-<%= image.id %>" tabindex="-1" aria-labelledby="image-detail-<%= image.id %>-label" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content p-4">
                        <div class="modal-header">
                            <h5 class="modal-title" id="image-detail-<%= image.id %>-label">Image</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <img src="uploads/<%= image.id %>" alt="<%= image.caption %>" class="mt-2 img-fluid mx-auto d-block rounded shadow" />
                        <p class="gallery-image-caption"><%= image.caption %></p>

                        <!-- TODO find a better way to do this check -->
                        <% if(typeof user=='object' && user) { %>
                            <% if(user.is_admin) { %>
                            <p>Admin Actions</p>
                            <form method="POST" action="/gallery">
                                <input type="hidden" name="image_id" value="<%= image.id %>">
                                <input type="hidden" name="activeHidden" value="<%= image.active %>">

                                <div class="modal-body">
                                    <div class="mb-3">
                                        <input class="form-check-input" type="checkbox" <%= image.active ? 'checked' : '' %> role="switch" name="active" id="activeImage-<%= image.id %>" value="<%= image.active ? '1' : '0' %>">
                                        <label class="form-check-label" for="activeImage-<%= image.id %>">Active</label>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                                    <button class="btn btn-success">Update</button>
                                </div>
                            </form>
                            <% } %>
                        <% } %>
                    </div>
                </div>
            </div>
        <% } %>
    </div>
</div>
