{% load static %}

<!-- Delete Confirmation Modal -->
<div class="modal fade show" 
     id="deleteArtifactModal" 
     tabindex="-1" 
     aria-labelledby="deleteArtifactModalLabel" 
     aria-modal="true" 
     role="dialog"
     style="display: block; background-color: rgba(0, 0, 0, 0.5);">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteArtifactModalLabel">
                    <i class="fa-solid fa-triangle-exclamation"></i> Delete Artifact?
                </h5>
                <button type="button" 
                        class="btn-close btn-close-white" 
                        data-bs-dismiss="modal" 
                        aria-label="Close"
                        onclick="document.getElementById('deleteArtifactModal').remove()">
                </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <div class="text-center mb-4">
                    <i class="fa-solid fa-triangle-exclamation fa-4x text-danger"></i>
                </div>

                <p class="text-center">
                    You are about to delete the artifact:
                </p>
                <h5 class="text-center mb-4">
                    <strong>{{ artifact.name }}</strong>
                </h5>

                <!-- Consumer Warning -->
                {% if consumer_count > 0 %}
                <div class="alert alert-warning mb-3">
                    <i class="fa-solid fa-exclamation-triangle"></i>
                    <strong>Warning:</strong> This artifact is used by {{ consumer_count }} activit{{ consumer_count|pluralize:"y,ies" }}:
                    <ul class="mb-0 mt-2">
                        {% for input in consumers %}
                        <li>{{ input.activity.name }} ({{ input.activity.workflow.name }})</li>
                        {% endfor %}
                    </ul>
                    <small class="d-block mt-2">
                        These activities will lose access to this artifact.
                    </small>
                </div>
                {% endif %}

                <!-- Template Warning -->
                {% if has_template %}
                <div class="alert alert-info mb-3">
                    <i class="fa-solid fa-file"></i>
                    <strong>Note:</strong> Template file will also be deleted.
                </div>
                {% endif %}

                <!-- Confirmation Text -->
                <div class="alert alert-danger mb-0">
                    <i class="fa-solid fa-exclamation-circle"></i>
                    <strong>This action cannot be undone.</strong>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" 
                        class="btn btn-secondary"
                        data-testid="btn-cancel-delete"
                        data-bs-toggle="tooltip"
                        title="Keep artifact"
                        data-bs-dismiss="modal"
                        onclick="document.getElementById('deleteArtifactModal').remove()">
                    <i class="fa-solid fa-times"></i> Cancel
                </button>
                <button type="button" 
                        class="btn btn-danger"
                        data-testid="btn-confirm-delete"
                        data-bs-toggle="tooltip"
                        title="Permanently delete artifact"
                        hx-post="{% url 'artifact_delete' pk=artifact.pk %}"
                        hx-confirm="Are you sure you want to delete this artifact?"
                        hx-target="body">
                    <i class="fa-solid fa-trash"></i> Delete Artifact
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Show the modal -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('deleteArtifactModal');
    if (modal) {
        var bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        
        // Clean up on close
        modal.addEventListener('hidden.bs.modal', function () {
            modal.remove();
        });
    }
});
</script>