{{> zenburn_header}}

<div class="detail-container">
    <div class="breadcrumb">
        <a href="/books">← Back to catalog</a>
    </div>

    {{#if results.[0]}}
        {{#with results.[0]}}
        <div class="book-hero">
            <h1 class="book-hero-title">{{title}}</h1>
            <p class="book-hero-author">by {{author}}</p>
            
            <div class="meta-grid">
                <div class="meta-item">
                    <div class="meta-label">Rating</div>
                    <div class="meta-value rating">⭐ {{rating}}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Published</div>
                    <div class="meta-value">{{year}}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Genre</div>
                    <div class="meta-value">{{genre}}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">ISBN</div>
                    <div class="meta-value" style="font-size: 1rem; font-family: monospace;">{{isbn}}</div>
                </div>
            </div>
        </div>

        <div class="description-section">
            <h3>About This Book</h3>
            <p class="description-text">{{description}}</p>
        </div>

        <a href="/books" class="back-button">← Back to Catalog</a>
        {{/with}}
    {{else}}
        <div class="not-found">
            <h2>Book Not Found</h2>
            <p>The requested book could not be found in our catalog.</p>
            <a href="/books" class="back-button">← Back to Catalog</a>
        </div>
    {{/if}}
</div>

{{> zenburn_footer}}