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

{% block global-content %}
  <div class="l-container">
    <div class="l-breadcrumb">
      <a href="/"><span>{% trans "Strona główna" %}</span></a>
      <a href="/katalog/lektury/"><span>{% trans "Literatura" %}</span></a>
      {% for ancestor in fragment.book.ancestors %}
        <a href="{{ ancestor.get_absolute_url }}">{{ ancestor.title }}</a>
      {% endfor %}
      <a href="{{ fragment.book.get_absolute_url }}"><span>{{ book.title }}</span></a>
    </div>
  </div>

  <main class="l-main">

    <div class="l-section">
      <div class="l-author__header">
        <h1>
          <span>{% trans "Motyw" %}:</span> {{ theme.name }}
          <span>{% trans "w utworze" %}</span>
          <a href="{{ book.get_absolute_url }}">{{ book }}</a>
        </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="filtry, tytuł">
         </div>
         <div class="l-books__sorting">
         <span>Sortuj:</span>
         <div>
         <button>autorzy</button>
         <button>epoki</button>
         <button>gatunki</button>
         <button>rodzaje</button>
         <button class="is-active">motywy</button>
         </div>
         </div>
         </div>
         </div -->

    {% autopaginate fragments 10 %}

    <div class="l-section l-section--col">
      <div class="l-theme">
        <div class="l-theme__col">
          <div class="l-books__col">

            {% for fragment in fragments %}
              {% include 'catalogue/fragment_box.html' %}
            {% endfor %}
            {% paginate %}
          </div>
        </div>
        <div class="l-theme__col">
          <div class="l-theme__info">
            <h3>{% trans "Motyw" %}: {{ theme.name }}</h3>
            {{ theme.description|safe }}
            <!--
                 <h3>Motyw w sztuce <i class="icon icon-arrow-left"></i> <i class="icon icon-arrow-right"></i></h3>
                 <div class="l-theme__info__slider">
                 <img src="images/motyw.jpg" alt="">
                 <img src="images/motyw.jpg" alt="">
                 <img src="images/motyw.jpg" alt="">
                 </div>
            -->
          </div>
        </div>
      </div>
    </div>
  </main>

{% endblock %}