<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight">
            {{ __('Contacts') }}
        </h2>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">

            {{-- Books list --}}
            <div class="bg-white shadow-sm sm:rounded-lg">
                <ul class="divide-y divide-gray-200">
                    @forelse($books as $book)
                        <li class="px-6 py-4 flex items-center justify-between">
                            <a href="{{ route('book.show', $book) }}" class="font-medium text-indigo-600">
                                {{ $book->displayname }}
                            </a>
                        </li>
                    @empty
                        <li class="px-6 py-4">{{ __('No address books yet.') }}</li>
                    @endforelse
                </ul>
            </div>

        </div>
    </div>
</x-app-layout>
