<!-- Delete Confirmation Modal -->
<div class="films-modal-backdrop" id="deleteModalBackdrop" style="display: none;"></div>
<div class="films-modal" id="deleteModal" style="display: none;">
    <div class="films-modal-header">
        <h3 class="films-modal-title">Confirm Deletion</h3>
        <button type="button" class="films-modal-close" id="closeDeleteModal">
            <span class="material-symbols-outlined">close</span>
        </button>
    </div>
    <div class="films-modal-body">
        <p id="deleteConfirmText">Are you sure you want to delete this film?</p>
        <p id="deleteWarningText" class="films-text-warning">This action cannot be undone.</p>
        <p class="films-text-info">Note: Films that are used in schedule entries cannot be deleted.</p>
    </div>
    <div class="films-modal-footer">
        <button type="button" class="films-btn films-btn-secondary" id="cancelDeleteBtn">Cancel</button>
        <form method="post" action="" id="deleteForm">
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="id" id="deleteId" value="">
            <button type="submit" class="films-btn films-btn-danger">
                <span class="material-symbols-outlined">delete</span> Delete
            </button>
        </form>
    </div>
</div>