mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
61 lines
2.0 KiB
Plaintext
61 lines
2.0 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import ModalClose from './ModalClose.astro'
|
|
---
|
|
|
|
<ModalClose />
|
|
<div class="modal-status bg-danger"></div>
|
|
<div class="modal-body text-center py-4">
|
|
<Icon name="alert-triangle" color="danger" size="lg" class="mb-2" />
|
|
|
|
<h3 id="modal-confirm-delete-title">Are you sure?</h3>
|
|
<div class="text-secondary mb-4">
|
|
<p id="confirm-delete-message">Do you really want to delete this item? This action cannot be undone.</p>
|
|
<div id="confirm-delete-items" class="text-start d-none">
|
|
<div class="card card-sm mt-3">
|
|
<div class="card-body">
|
|
<div class="fw-bold mb-2">Items to be deleted:</div>
|
|
<ul class="list-unstyled mb-0" id="confirm-delete-list">
|
|
<li>• Item 1</li>
|
|
<li>• Item 2</li>
|
|
<li>• Item 3</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="form-check text-start">
|
|
<input class="form-check-input" type="checkbox" id="confirm-delete-checkbox" />
|
|
<span class="form-check-label">I understand this action cannot be undone</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<div class="w-100">
|
|
<div class="row">
|
|
<div class="col"><Button text="Cancel" dismiss block /></div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="confirm-delete-button" disabled> Delete </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- BEGIN CONFIRM DELETE -->
|
|
<script is:inline>
|
|
function initConfirmDelete() {
|
|
const checkbox = document.getElementById('confirm-delete-checkbox')
|
|
const deleteButton = document.getElementById('confirm-delete-button')
|
|
|
|
if (checkbox && deleteButton) {
|
|
checkbox.addEventListener('change', function () {
|
|
deleteButton.disabled = !this.checked
|
|
})
|
|
}
|
|
}
|
|
|
|
document.readyState !== 'loading' ? initConfirmDelete() : document.addEventListener('DOMContentLoaded', initConfirmDelete, { once: true })
|
|
</script>
|
|
<!-- END CONFIRM DELETE -->
|