@props([
])
<x-bs-modal id="file-confirm-delete-modal" size="sm" data-file-url="">
    <x-bs-modal.header
        :icon="[
            'icon' => 'folder-plus',
            'theme' => 'primary'
        ]"
    />
    <x-bs-modal.content>
        <h2 class="font-semi-bold mt-3 text-body text-lg">Confirm File Deletion</h2>
        <p class="mb-5 mt-1 text-gray-500">Deleting this file is permannent.</p>
        <p class="mb-5 mt-1 text-gray-500">It cannot be recovered.</p>
        <p class="mb-5 mt-1 text-gray-500" style="margin-top:0.75em;">
            Do you really want to delete this file?<br />
            &quot;<span data-role="file-confirm-delete-filename">filename</span>&quot;
        </p>
    </x-bs-modal.content>
    <x-bs-modal.actions>
        <x-bs-modal.footer-yesno 
            yes="Delete"
            no="Cancel" 
        />
    </x-bs-modal.actions>
</x-bs-modal>