@props([
    'model',
    'editRoute' => null,
    'deleteRoute' => null,
    'showRoute' => null,
])

<div class="flex justify-center gap-2">

    @if($showRoute)
        @can('view', $model)
            <a href="{{ $showRoute }}"
               class="bg-slate-950 hover:bg-slate-800 text-white px-3 py-2 rounded-lg text-xs font-bold">
                View
            </a>
        @endcan
    @endif

    @if($editRoute)
        @can('update', $model)
            <a href="{{ $editRoute }}"
               class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-xs font-bold">
                Edit
            </a>
        @endcan
    @endif

    @if($deleteRoute)
        @can('delete', $model)
            <form method="POST"
                  action="{{ $deleteRoute }}"
                  onsubmit="return confirm('Delete this record?')">
                @csrf
                @method('DELETE')

                <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-lg text-xs font-bold">
                    Delete
                </button>
            </form>
        @endcan
    @endif

</div>