@props([
'id' => null,
'model' => 'Modal Title',
'description' => "",
'action' => "#",
'route' => 'Modal Title',
'warning' => null
])



<x-ui.modal title='DELETE {{$model}}' id="{{$id}}" class="delete-modal">
    <x-slot name="body">

        @if($warning)
            <p class="warning">{{$warning}}</p>
        @endif

        <p class="info">Are you sure you want to delete {{$description}} </p>

        <img src="{{asset('images/trashcan.svg')}}" alt="trashcan" width="90" height="115">
        <p class="info">This can not be undone!</p>

        <form blade="{{ $viewName ?? 'unknown' }}" action="{{$action}}" id="form-{{$id}}" method="POST">
            @csrf
            <div class="d-flex gap-3 mt-4 justify-content-center">
                <x-ui.blue-button class="close-modal-btn">
                    CANCEL
                </x-ui.blue-button>
                <x-ui.blue-button form="form-{{$id}}">
                   OK
                </x-ui.blue-button>
            </div>
        </form>
    </x-slot>
</x-ui.modal>