{% extends "base.html" %}

{% block title %}{{ book.title }}{% endblock %}

{% block content %}
<p class="crumbs"><a href="{{ url_for('index') }}">My books</a> &nbsp;/&nbsp; {{ book.title }}</p>

<div class="detail-card">
  <div class="detail-top">
    <div class="detail-cover">{{ book.title }}</div>
    <div class="detail-info">
      <h1>{{ book.title }}</h1>
      <p class="author">by {{ book.author }}</p>

      {% if book.status == 'reading' %}
        <span class="badge b-reading" style="margin-bottom:16px; display:inline-block;">Reading</span>
      {% elif book.status == 'finished' %}
        <span class="badge b-done" style="margin-bottom:16px; display:inline-block;">Finished</span>
      {% else %}
        <span class="badge b-want" style="margin-bottom:16px; display:inline-block;">Want to read</span>
      {% endif %}

      <div class="detail-actions">
        <a href="{{ url_for('edit_book', id=book.id) }}" class="btn btn-primary">Edit book</a>
        <a href="{{ url_for('index') }}" class="btn btn-cancel">Back to list</a>
        <a href="{{ url_for('delete_book', id=book.id) }}"
           onclick="return confirm('Delete this book?');"
           class="btn btn-delete">Delete</a>
      </div>
    </div>
  </div>

  <div class="meta-row">
    <div class="meta-item">
      <p class="meta-label">Genre</p>
      <p class="meta-value">{{ book.genre or '—' }}</p>
    </div>
    <div class="meta-item">
      <p class="meta-label">Pages</p>
      <p class="meta-value">{{ book.pages or '—' }}</p>
    </div>
    <div class="meta-item">
      <p class="meta-label">Published</p>
      <p class="meta-value">{{ book.year or '—' }}</p>
    </div>
    <div class="meta-item">
      <p class="meta-label">Status</p>
      <p class="meta-value">
        {% if book.status == 'reading' %}Reading
        {% elif book.status == 'finished' %}Finished
        {% else %}Want to read{% endif %}
      </p>
    </div>
  </div>

  {% if book.notes %}
  <div class="section">
    <h2>Notes</h2>
    <div class="notes-box">{{ book.notes }}</div>
  </div>
  {% endif %}
</div>
{% endblock %}