<x-app-layout>
    <x-slot name="header">
        <h2 class="fw-semibold fs-4 text-dark">
            All {{ Str::plural(ucfirst('{{ modelVariable }}')) }}
        </h2>
    </x-slot>

    <div class="py-5">
        <div class="container">
            <div class="bg-white shadow-sm rounded p-4">
            	    <div class="d-flex align-items-center justify-content-between mb-3">
            	        <span></span>
            	        <a href="{{ route('{{ tableName }}.create') }}" class="btn btn-primary">
            	            + New {{ ucfirst('{{ modelVariable }}') }}
            	        </a>
            	    </div>
            	    <table class="table table-hover">
            	        <thead>
            	            <tr>
            	                {{ headerInsertPoint }}
            	                <th scope="col">Actions</th>
            	            </tr>
            	        </thead>
            	        <tbody>
            	            @forelse ($items as $item)
            	                <tr>
            	                    {{ valueInsertPoint }}
            	                    <td>
            	                        <div class="d-flex gap-2"> 
            	                            <a href="{{ route('{{ tableName }}.show', $item) }}" class="text-primary">View</a>
            	                            <a href="{{ route('{{ tableName }}.edit', $item) }}" class="text-warning">Edit</a>
            	                            <form action="{{ route('{{ tableName }}.destroy', $item) }}" method="POST" class="d-inline">
            	                                @csrf
            	                                @method('DELETE')
            	                                <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Delete?')">Delete</button>
            	                            </form>
            	                        </div>
            	                    </td>
            	                </tr>
            	            @empty
            	                <tr>
            	                    <td colspan="{{ colCount }}">No {{ tableName }} found.</td>
            	                </tr>
            	            @endforelse
            	        </tbody>
            	    </table>
            	</div>
        </div>
    </div>
</x-app-layout>