82 lines
2.4 KiB
HTML
82 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Delete Connections Puzzle</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="header-links">
|
|
<a href="/all">all</a>
|
|
{% if show_zero_link %}
|
|
<a href="/0">0</a>
|
|
{% endif %}
|
|
{% for number in nav_numbers %}
|
|
<a href="/{{ number }}">{{ number }}</a>
|
|
{% endfor %}
|
|
<a href="/new">new</a>
|
|
<a href="/delete" class="active">delete</a>
|
|
</nav>
|
|
|
|
<h1>Connections</h1>
|
|
<p class="subtitle">Delete Puzzle</p>
|
|
|
|
<div class="delete-list">
|
|
{% for puzzle in puzzles %}
|
|
<div class="delete-row">
|
|
<div class="delete-meta">
|
|
<strong>#{{ puzzle.number }}</strong>
|
|
<span>By {{ puzzle.author }} | {{ puzzle.creation_date }}</span>
|
|
</div>
|
|
<form method="post" class="delete-form" data-number="{{ puzzle.number }}">
|
|
<input type="hidden" name="number" value="{{ puzzle.number }}">
|
|
<button type="button" class="danger-btn">Delete</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div class="delete-empty">No stored puzzles to delete.</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="message" class="{{ 'ok' if deleted else '' }}">
|
|
{% if deleted %}Deleted puzzle #{{ deleted }}.{% elif error == 'invalid' %}Invalid puzzle number.{% elif error == 'missing' %}Puzzle not found.{% endif %}
|
|
</div>
|
|
|
|
<dialog id="confirmDeleteDialog" class="confirm-dialog">
|
|
<form method="dialog" class="confirm-content">
|
|
<p id="confirmText">Delete this puzzle?</p>
|
|
<div class="controls">
|
|
<button value="cancel">Cancel</button>
|
|
<button value="confirm" class="danger-btn">Delete</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script>
|
|
const dialog = document.getElementById('confirmDeleteDialog');
|
|
const confirmText = document.getElementById('confirmText');
|
|
let pendingForm = null;
|
|
|
|
document.querySelectorAll('.delete-form .danger-btn').forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
pendingForm = button.closest('.delete-form');
|
|
const number = pendingForm.dataset.number;
|
|
confirmText.textContent = `Delete puzzle #${number}? This cannot be undone.`;
|
|
dialog.showModal();
|
|
});
|
|
});
|
|
|
|
dialog.addEventListener('close', () => {
|
|
if (dialog.returnValue === 'confirm' && pendingForm) {
|
|
pendingForm.submit();
|
|
}
|
|
pendingForm = null;
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|