<x-app-layout>
    <h1>{{ $book->displayname }}</h1>

    <p>Color: <span style="color: {{ $book->meta->color }}">{{ $book->meta->color }}</span></p>

    <h2>Contacts</h2>
    <ul>
        @foreach ($book->cards as $card)
            <li>{{ $card->displayname ?? 'Unnamed contact' }}</li>
        @endforeach
    </ul>

    <a href="{{ route('book.edit', $book) }}">Edit Book</a>
    <a href="{{ route('book.index') }}">Back to all</a>
</x-app-layout>
