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

    <div class="py-5">
        <div class="container">
            <div class="bg-white shadow-sm rounded p-4">
                <div class="mb-3">
                    @foreach($fields as $field)
                        <div class="mb-2">
                            <span class="fw-semibold">{{ ucfirst($field) }}:</span>
                            <span class="ms-2">{{ $item->$field }}</span>
                        </div>
                    @endforeach
                </div>
                <div class="d-flex justify-content-end mt-4">
                    <a href="{{ route('{{ tableName }}.edit', $item) }}" class="me-2 btn btn-warning text-white">Edit</a>
                    <a href="{{ route('{{ tableName }}.index') }}" class="btn btn-secondary">Back</a>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>