{% extends 'bootstrap/base.html' %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
  crossorigin="anonymous" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles_book.css') }}">
{% endblock %}

{% block title %}My Bookshelf{% endblock %}

{% block content %}
<header class="site-header">
  <h1><b>My Bookshelf</b></h1>
  <p><b>Your reading list</b></p>
</header>

<div class="container">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }}">{{ message }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% if books %}
  <table class="book-list">
    <thead>
      <tr>
        <th>#</th>
        <th>Cover</th>
        <th>Title</th>
        <th>Author</th>
        <th>Year</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for book in books %}
      <tr>
        <td>{{ book.ranking }}</td>
        <td>
          {% if book.img_url %}
          <img src="{{ book.img_url }}" alt="{{ book.title }}" class="book-cover">
          {% else %}
          <div class="book-cover-placeholder"><i class="fas fa-book"></i></div>
          {% endif %}
        </td>
        <td class="book-title">{{ book.title }}</td>
        <td>{{ book.author or 'N/A' }}</td>
        <td>{{ book.year or 'N/A' }}</td>
        <td>
          {% if book.status == 'read' %}
          <span class="status-read">Read</span>
          {% elif book.status == 'reading' %}
          <span class="status-reading">Currently Reading</span>
          {% else %}
          <span class="status-toread">To Read</span>
          {% endif %}
        </td>
        <td>
          <a href="{{ url_for('edit_book', book_id=book.id) }}" class="btn btn-secondary btn-sm" title="Edit">
            <i class="fas fa-edit"></i>
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state">
    <i class="fas fa-book"></i>
    <h3>Your bookshelf is empty.</h3>
    <p>Add books to get started!</p>
    <a href="{{ url_for('add') }}" class="btn btn-primary">Add a Book</a>
  </div>
  {% endif %}
</div>

<footer class="site-footer">
  <div class="footer-links">
    <a href="{{ url_for('gallery') }}" class="footer-link"><i class="fas fa-th"></i> Gallery</a>
    <a href="{{ url_for('add') }}" class="footer-link"><i class="fas fa-plus"></i> Add Book</a>
    <a href="{{ url_for('logout') }}" class="footer-link"><i class="fas fa-sign-out-alt"></i> Logout</a>
  </div>
</footer>

{% endblock %}