{% load static %}

<div class="modal" tabindex="-1" role="dialog" data-testid="playbook-delete-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">
          <i class="fa-solid fa-triangle-exclamation"></i>
          Delete Playbook?
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
          You are about to delete playbook
          <strong>{{ playbook.name }}</strong> (v{{ playbook.version }}).
        </p>
        <p class="text-danger mb-0">
          <strong>This action cannot be undone.</strong>
        </p>
        <p class="mt-2 mb-0">
          All workflows, activities, artifacts, agents, skills and version history related to this playbook will be permanently deleted.
        </p>
        {% if playbook.visibility == 'public' %}
        <p class="alert alert-warning small mt-3 mb-0" data-testid="public-delete-warning" role="alert">
          This playbook is <strong>public</strong>. Deleting it will remove access for everyone else who can currently view it.
        </p>
        {% endif %}

        {% if playbook.status == 'active' %}
        <p class="text-warning mt-3 mb-1">
          This playbook is currently Active.
        </p>
        <p class="text-muted mb-0">
          Consider disabling it first if you're unsure.
        </p>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
          Cancel
        </button>
        <form method="post" action="{% url 'playbook_delete' pk=playbook.pk %}" class="d-inline">
          {% csrf_token %}
          <button type="submit"
                  class="btn btn-danger"
                  data-testid="playbook-delete-confirm-button">
            Delete Playbook
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('htmx:afterSwap', function (event) {
  if (event.target && event.target.id === 'playbook-delete-modal-container') {
    var modalElement = event.target.querySelector('.modal');
    if (modalElement && window.bootstrap && bootstrap.Modal) {
      var modal = bootstrap.Modal.getOrCreateInstance(modalElement);
      modal.show();
    }
  }
});
</script>