{% extends "base.html" %}
{% block content %}
<div class="page-header">
<p class="eyebrow">Personal reading queue</p>
<h1>Reading list</h1>
<p>Keep track of the books you want to read next.</p>
</div>
<section class="panel" aria-labelledby="add-book-heading">
<h2 id="add-book-heading">Add a book</h2>
{% if error %}
<div id="form-error" class="error" role="alert" aria-live="polite">{{ error }}</div>
{% endif %}
<form action="{{ url_for('reading_list.add_book') }}" method="post">
<div class="form-fields">
<div class="field">
<label for="title">Title <span aria-hidden="true">*</span></label>
<input id="title" name="title" type="text" autocomplete="off" required{% if error %} aria-describedby="form-error"{% endif %} value="{{ request.form.get('title', '') }}">
</div>
<div class="field">
<label for="author">Author <span aria-hidden="true">*</span></label>
<input id="author" name="author" type="text" autocomplete="off" required{% if error %} aria-describedby="form-error"{% endif %} value="{{ request.form.get('author', '') }}">
</div>
</div>
<button type="submit">Add to reading list</button>
</form>
</section>
<section class="panel" aria-labelledby="list-heading">
<h2 id="list-heading">Books to read</h2>
{% if books %}
<ol class="book-list">
{% for book in books %}
<li class="book-item">
<div>
<strong>{{ book.title }}</strong>
<span>by {{ book.author }}</span>
<span class="read-status">{{ "Read" if book.is_read else "Unread" }}</span>
</div>
<div class="book-actions">
{% if not book.is_read %}
<form action="{{ url_for('reading_list.mark_read', book_id=book.id) }}" method="post">
<button type="submit" aria-label="Mark {{ book.title }} as read">Mark as read</button>
</form>
{% endif %}
<form action="{{ url_for('reading_list.remove_book', book_id=book.id) }}" method="post">
<button class="remove-button" type="submit" aria-label="Remove {{ book.title }}">Remove</button>
</form>
</div>
</li>
{% endfor %}
</ol>
{% else %}
<p class="empty-state">Your reading list is empty. Add a book to get started.</p>
{% endif %}
</section>
{% endblock %}
Run artifact