{% extends "catalog/base.html" %}
{% block content %}
<h1>Catalog <small>{{ page.paginator.count }} of {{ total }} books</small></h1>
<form class="filters" method="get">
  <input type="search" name="q" value="{{ q }}" placeholder="Title, author, ISBN or barcode" autofocus>
  <select name="shelf"><option value="">All shelves</option>{% for s in shelves %}<option {% if s == sel_shelf %}selected{% endif %}>{{ s }}</option>{% endfor %}</select>
  <select name="tag"><option value="">All collections</option>{% for t in tags %}<option {% if t.name == sel_tag %}selected{% endif %}>{{ t.name }}</option>{% endfor %}</select>
  <select name="sort">
    <option value="title" {% if sort == "title" %}selected{% endif %}>Sort: title</option>
    <option value="author" {% if sort == "author" %}selected{% endif %}>Sort: author</option>
    <option value="year" {% if sort == "year" %}selected{% endif %}>Sort: newest year</option>
    <option value="new" {% if sort == "new" %}selected{% endif %}>Sort: recently added</option>
  </select>
  <label class="check"><input type="checkbox" name="avail" value="1" {% if avail %}checked{% endif %}> Available now</label>
  <button>Search</button>
</form>
<div class="grid">
{% for b in page %}
  <a class="card" href="{% url 'book' b.pk %}">
    <div class="cover" style="background:{{ b.cover_color }}"><span>{{ b.title }}</span></div>
    <div class="meta">
      <strong>{{ b.title }}</strong>
      <span class="muted">{{ b.author_list|join:", " }}{% if b.year %} · {{ b.year }}{% endif %}</span>
      {% if b.n_free > 0 %}<span class="pill ok">{{ b.n_free }} of {{ b.n_copies }} available</span>{% else %}<span class="pill out">{% if b.n_copies %}All out{% else %}No copies{% endif %}</span>{% endif %}
    </div>
  </a>
{% empty %}<p class="muted">No books match.</p>{% endfor %}
</div>
<div class="pager">
  {% if page.has_previous %}<a href="?{{ querystring }}&page={{ page.previous_page_number }}">&larr; Previous</a>{% endif %}
  <span>Page {{ page.number }} of {{ page.paginator.num_pages }}</span>
  {% if page.has_next %}<a href="?{{ querystring }}&page={{ page.next_page_number }}">Next &rarr;</a>{% endif %}
</div>
{% endblock %}