@can('delete-documents')
    <div class="card p-4" x-data="deleteAction({
        url: @js(route('admin.documents.destroy', $document)),
        redirectUrl: @js(route('admin.documents.index', ['folder_id' => $document->folder_id]))
    })">
        <p class="section-label mb-3">Danger Zone</p>
        <button type="button" x-show="!confirming" @click="confirming = true"
                class="flex w-full items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 py-2.5 text-sm font-semibold text-red-600 transition-colors hover:bg-red-100">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
            Delete Document
        </button>
        <div x-show="confirming" class="space-y-2.5" style="display:none;">
            <p class="text-center text-sm font-semibold text-red-700">Permanently delete this document?</p>
            <div class="flex items-center justify-center gap-3">
                <button type="button" @click="destroy" :disabled="loading" class="btn-danger px-5 disabled:opacity-60" x-text="loading ? 'Deleting...' : 'Yes, Delete'"></button>
                <button type="button" @click="confirming = false" class="btn-secondary px-5">Cancel</button>
            </div>
            <p x-show="error" x-text="error" class="text-center text-xs font-semibold text-red-600"></p>
        </div>
    </div>
@endcan