{% extends "base.html" %}

{% block title %}Add book{% endblock %}

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

  <div class="page-head">
    <div>
      <h1>Add a new book</h1>
      <p>Fill in the details to add a book to your reading list.</p>
    </div>
  </div>

  <div class="form-card">
    <form action="{{ url_for('add_book') }}" method="post">
      <div class="field">
        <label for="title">Title <span class="req">*</span></label>
        <input id="title" name="title" type="text" placeholder="e.g. Atomic habits" 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" placeholder="e.g. James Clear" required>
        </div>
        <div class="field">
          <label for="genre">Genre</label>
          <select id="genre" name="genre">
            <option value="">Select a genre</option>
            <option>Fiction</option>
            <option>Non-fiction</option>
            <option>Biography</option>
            <option>Science</option>
            <option>Self-help</option>
            <option>History</option>
            <option>Technology</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <div class="row-2">
        <div class="field">
          <label for="pages">Pages</label>
          <input id="pages" name="pages" type="number" min="1" placeholder="e.g. 320">
        </div>
        <div class="field">
          <label for="year">Published year</label>
          <input id="year" name="year" type="number" min="1000" max="2100" placeholder="e.g. 2018">
        </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" checked>
            <label for="s-want">Want to read</label>
          </div>
          <div class="status-opt">
            <input id="s-reading" name="status" type="radio" value="reading">
            <label for="s-reading">Reading</label>
          </div>
          <div class="status-opt">
            <input id="s-done" name="status" type="radio" value="finished">
            <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" placeholder="https://...">
        <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" placeholder="Why you want to read it, where you heard about it..."></textarea>
      </div>

      <div class="form-actions">
        <div></div>
        <div class="actions-right">
          <a href="{{ url_for('index') }}" class="btn btn-cancel">Cancel</a>
          <button type="submit" class="btn btn-save">Save book</button>
        </div>
      </div>
    </form>
  </div>
  {% endblock %}
</div>
{% endblock %}