{% extends "base.html" %}
{% block content %}
{% set sub_title = "Unlinked photo cleanup" %}
{% set active_tab = 'Cleanup' %}
{% set tab_label = "Cleanup" %}
{% set back_url = "/cp_cleanup" %}
{% include "includes/cp_tab_subheader.html" %}
{% with confirm_yes_label="Delete" %}
{% include 'includes/confirm_modal.html' %}
{% endwith %}
<div class="container-flex">
<form name="del_item_form" method="POST" action="/cp_photofilesdel">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
{% if orphans is defined and orphans|length!=0 %}
	{% for elem in orphans %}
                {% if elem != "none.jpg" %}
			<input type="hidden" name="filename" value="{{elem}}"></input>
		{% endif %}
	{% endfor %}
	{% for elem in orphans %}
         
		<div class="row pt-3 pb-3" style="min-height: 40px; border-bottom: 2px solid #ddd; align-items: center;">
			<div class="col col-auto">
				<label class="cp-checkbox-wrap">
					<input type="checkbox" class="cp-orphan-checkbox" name="checkbox" value="{{loop.index}}"></input>
				</label>
			</div>
        	        <div class="col col-auto">
                	        <img src="{{ITEM_IMAGE_DIR}}{{elem}}" class="thumbnail cp-orphan-thumbnail"
                        	     style="display:inline-block;  max-width:230px;
                                	    max-height:50px;  width: auto;  height: auto;">
	                </div>
			<div class="col col-auto">
				{{elem}}
			</div>
		</div>
	{% endfor %}
</div>
<div class="row mt-3 btn-pair">
	<div class="col col-auto">
		<button type="button" id="delete_selected_btn" class="imps icon-left trash">Delete selected</button>
		</form>
	</div>
	<div class="col col-auto">
		<form name="del_all_form" method="post" action="/cp_delallorphanphotos" style="display:inline;">
			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
			<button type="button" id="delete_all_btn" class="imps icon-left trash">Delete all</button>
		</form>
	</div>
</div>

<script>
// Confirm modal (Delete/Cancel) -- these deletes are permanent and
// used to fire with no confirmation at all. Cancel/close is wired up
// generically in modal.js; only what triggers this modal and which
// form Delete actually submits are page-specific.
var confirmYesBtn = document.getElementById("confirm_yes_btn");
var pendingForm = null;

document.getElementById("delete_selected_btn").addEventListener("click", function() {
	pendingForm = document.forms["del_item_form"];
	showConfirmModal("Delete the selected photos? This cannot be undone.");
});

document.getElementById("delete_all_btn").addEventListener("click", function() {
	pendingForm = document.forms["del_all_form"];
	showConfirmModal("Delete all unlinked photos? This cannot be undone.");
});

confirmYesBtn.addEventListener("click", function() {
	if (pendingForm) {
		pendingForm.submit();
	}
});
</script>

{% else %}
   <br>
   <div>No unlinked photos exist at this time </div>
{% endif %}
{% endblock %}