{% extends 'base.html' %}
{% load i18n %}
{% load catalogue_tags %}
{% load thumbnail %}
{% load pagination_tags %}

{% load choose_cites from social_tags %}


{% block breadcrumbs %}
  <a href="/katalog/"><span>{% trans "Katalog" %}</span></a>
  {% if main_tag %}
    <a href="{{ main_tag.get_absolute_catalogue_url }}"><span>{{ main_tag.get_category_display|title }}</span></a>
  {% endif %}
{% endblock %}

{% block main %}
  <div class="l-section">
    <div class="l-author__header">
      <span data-edit="catalogue/tag/{{ main_tag.id }}"></span>
      {% if main_tag.photo %}
        {% thumbnail main_tag.photo '40x40' crop='top' as th %}
        <figure>
          <img src="{{ th.url }}" alt="{{ main_tag.name }}" srcset="{{ th.url }} 1x, {{ th.url|resolution:"2x" }} 2x">
        </figure>
        {% endthumbnail %}
      {% endif %}
      <h1>
        {% if main_tag %}
          {{ main_tag.name }}
        {% else %}
          {{ view.title }}
        {% endif %}
      </h1>
    </div>
  </div>

  <div class="l-section">
    <div class="l-books__header">
      <div class="l-books__input">
        <i class="icon icon-filter"></i>
        <input type="text" placeholder="{% trans 'filtry, tytuł' %}" class="quick-filter" data-for="book-list" data-filters="with-filter" value="{{ request.GET.search }}">
        <div class="filter-container">
          {% for tag in tags %}
            {% if tag is not main_tag %}
              <span class="filter filter-category-{{ tag.category }}">
                <a href="{% catalogue_url view.list_type tag %}">{{ tag }}</a>
                <a href="{% catalogue_url view.list_type tags -tag %}">✖</a>
              </span>
            {% endif %}
          {% endfor %}
        </div>

      </div>
      {% if view.get_orderings %}
      <div class="l-books__sorting">
        <span>{% trans 'Sortuj:' %}</span>
        <div>
          {% for ordering in view.get_orderings %}
            <button
                {% if ordering.default %}
                data-order="-"
                {% else %}
                data-order="{{ ordering.slug }}"
                {% endif %}
                {% if ordering.active %}
                class="is-active"
                {% endif %}
            >{{ ordering.name }}</button>
          {% endfor %}
          <select name="sorting">
            {% for ordering in view.get_orderings %}
              <option
                  {% if ordering.default %}
                  value="-"
                  {% else %}
                  value="{{ ordering.slug }}"
                  {% endif %}
                  {% if ordering.active %}
                  selected="selected"
                  {% endif %}
              >{{ ordering.name }}</option>
          {% endfor %}
          </select>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="l-section">
  <div class="with-filter">
    <div class="row">
      <h2 class="header">{% nice_title_from_tags tags suggested_tags_by_category %}</h2>
      {% if suggested_tags %}
        <div class="filter-container">
          {% for tag in suggested_tags %}
            <span class="filter filter-category-{{ tag.category }}">
              <a href="{% catalogue_url view.list_type tags tag %}">{{ tag }}</a>
            </span>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  </div>
  </div>

  {% autopaginate object_list view.page_size %}

  <div class="l-section l-section--col">
    <div class="l-books__grid" id="book-list">
      {% for book in object_list %}
        {% include "catalogue/book_box.html" %}
      {% endfor %}
    </div>
  </div>

  <div id="paginator">
    {% paginate %}
  </div>

  {% if translation_list %}
    <div class="l-section l-section--col">
      <h2 class="header">Tłumaczenia</h2>
      <div class="l-books__grid" id="book-list">
        {% for book in translation_list %}
          {% include "catalogue/book_box.html" %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if narrated %}
    <div class="l-section l-section--col">
      <h2 class="header">Audiobooki</h2>
      <div class="l-books__grid" id="book-list">
        {% for book in narrated %}
          {% include "catalogue/book_box.html" %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if main_tag %}
    <section class="l-section">
      <div class="l-author">
        {% with tag=main_tag %}
          {% include 'catalogue/author_box.html' %}
        {% endwith %}
        {% choose_cites 3 author=main_tag as cites %}
        {% if cites %}
          <div class="row">
            <div class="l-author__quotes">
              <div class="l-author__quotes__slider">

                {% for fragment in cites %}
                  <div class="l-author__quotes__slider__item">
                    {% include "catalogue/fragment_slider_box.html" %}
                  </div>
                {% endfor %}

              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </section>
    {% endif %}
{% endblock %}
