{% extends "base.html" %}

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

{% block container %}
<div class="container-narrow">
  {% block content %}
  <p class="crumbs">
    <a href="{{ url_for('index') }}">My books</a> &nbsp;/&nbsp;
    <a href="{{ url_for('view_book', id=book.id) }}">{{ book.title }}</a> &nbsp;/&nbsp;
    Edit
  </p>

  <div class="page-head">
    <div>
      <h1>Edit book</h1>
      <p>Update the details for this book.</p>
    </div>
  </div>

  <div class="form-card">
    <form action="{{ url_for('edit_book', id=book.id) }}" method="post">

      <div class="field">
        <label for="title">Title <span class="req">*</span></label>
        <input id="title" name="title" type="text" value="{{ book.title }}" required>
      </div>

      <div class="row-2">
        <div class="field">
          <label for="author">Author <span class="req">*</span></label>
          <input id="author" name="author" type="text" value="{{ book.author }}" required>
        </div>
        <div class="field">
          <label for="genre">Genre</label>
          <select id="genre" name="genre">
            <option value="">Select a genre</option>
            {% for g in ['Fiction','Non-fiction','Biography','Science','Self-help','History','Technology','Other'] %}
              <option {% if book.genre == g %}selected{% endif %}>{{ g }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="row-2">
        <div class="field">
          <label for="pages">Pages</label>
          <input id="pages" name="pages" type="number" min="1" value="{{ book.pages or '' }}">
        </div>
        <div class="field">
          <label for="year">Published year</label>
          <input id="year" name="year" type="number" min="1000" max="2100" value="{{ book.year or '' }}">
        </div>
      </div>

      <div class="field">
        <label>Status</label>
        <div class="status-group">
          <div class="status-opt">
            <input id="s-want" name="status" type="radio" value="want"
                   {% if book.status == 'want' or not book.status %}checked{% endif %}>
            <label for="s-want">Want to read</label>
          </div>
          <div class="status-opt">
            <input id="s-reading" name="status" type="radio" value="reading"
                   {% if book.status == 'reading' %}checked{% endif %}>
            <label for="s-reading">Reading</label>
          </div>
          <div class="status-opt">
            <input id="s-done" name="status" type="radio" value="finished"
                   {% if book.status == 'finished' %}checked{% endif %}>
            <label for="s-done">Finished</label>
          </div>
        </div>
      </div>

      <div class="field">
        <label for="cover">Cover image URL</label>
        <input id="cover" name="cover" type="url" value="{{ book.cover_url or '' }}">
        <p class="hint">Optional. Paste a link to the book's cover image.</p>
      </div>

      <div class="field">
        <label for="notes">Notes</label>
        <textarea id="notes" name="notes">{{ book.notes or '' }}</textarea>
      </div>

      <div class="form-actions">
        <a href="{{ url_for('delete_book', id=book.id) }}"
           onclick="return confirm('Delete this book?');"
           class="btn btn-delete">Delete book</a>
        <div class="actions-right">
          <a href="{{ url_for('view_book', id=book.id) }}" class="btn btn-cancel">Cancel</a>
          <button type="submit" class="btn btn-save">Save changes</button>
        </div>
      </div>
    </form>
  </div>
  {% endblock %}
</div>
{% endblock %}