{% extends "base.html" %}

{% block title %}My to-read books{% endblock %}

{% block content %}
<div class="topbar">
  <div class="brand">
    <div class="logo">B</div>
    <div>
      <p class="app-title">My to-read books</p>
      <p class="app-subtitle">Your personal reading list</p>
    </div>
  </div>
  <a href="{{ url_for('add_book') }}" class="btn btn-primary">+ Add book</a>
</div>

<div class="search-bar">
  <input type="text" placeholder="Search by title or author...">
  <select>
    <option>All statuses</option>
    <option value="want">Want to read</option>
    <option value="reading">Reading</option>
    <option value="finished">Finished</option>
  </select>
</div>

{% set total = books|length %}
{% set reading_count = books|selectattr('status', 'equalto', 'reading')|list|length %}
{% set finished_count = books|selectattr('status', 'equalto', 'finished')|list|length %}

<div class="stats">
  <div class="stat"><p class="stat-label">Total books</p><p class="stat-num">{{ total }}</p></div>
  <div class="stat"><p class="stat-label">Reading now</p><p class="stat-num">{{ reading_count }}</p></div>
  <div class="stat"><p class="stat-label">Finished</p><p class="stat-num">{{ finished_count }}</p></div>
</div>

{% if books %}
<div class="book-grid">
  {% for book in books %}
  {% set palette = ['cover-1','cover-2','cover-3','cover-4','cover-5','cover-6'] %}
  <div class="book-card">
    <div class="cover {{ palette[loop.index0 % 6] }}">{{ book.title }}</div>
    <div>
      <p class="book-name">{{ book.title }}</p>
      <p class="book-author">{{ book.author }}</p>
    </div>
    <div class="book-row">
      {% if book.status == 'reading' %}
        <span class="badge b-reading">Reading</span>
      {% elif book.status == 'finished' %}
        <span class="badge b-done">Finished</span>
      {% else %}
        <span class="badge b-want">Want to read</span>
      {% endif %}
      {% if book.pages %}
        <span class="pages-count">{{ book.pages }} pages</span>
      {% endif %}
    </div>
    <div class="action-row">
      <a href="{{ url_for('view_book', id=book.id) }}" class="btn-view">View</a>
      <a href="{{ url_for('edit_book', id=book.id) }}" class="btn-edit">Edit</a>
      <a href="{{ url_for('delete_book', id=book.id) }}" class="btn-del-sm"
         onclick="return confirm('Delete this book?');">Delete</a>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="form-card" style="text-align:center;">
  <p style="margin:0 0 12px; color: var(--text-muted);">You haven't added any books yet.</p>
  <a href="{{ url_for('add_book') }}" class="btn btn-primary">+ Add your first book</a>
</div>
{% endif %}
{% endblock %}