---
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="bg-surface-secondary rounded-3 p-3 mt-3">
        <div class="fw-medium 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>

  <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 -->