{% extends "2022/base.html" %}
{% load static %}
{% load thumbnail %}
{% load catalogue_tags %}
{% load social_tags %}
{% load sponsors %}

{% block under-menu %}
  {% comment %}
    <div class="l-your-books">
      <div class="l-container">
        <div class="l-your-books__continue">
          <div class="l-your-books__header">
            <h3>Czytaj dalej</h3>
          </div>
          <div class="l-books">
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
          </div>
        </div>
        <div class="l-your-books__shelf">
          <div class="l-your-books__header">
            <h3>Moja półka</h3>
            <div class="l-your-books__header__actions">
              <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
              <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
            </div>
          </div>
          <div class="l-books">
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
            <article class="l-books__item l-books__item--placeholder">
              <figure class="l-books__item__img">
                <a href="#">
                  <img src="images/book-2.jpg" alt="Wstęp do filozofii">
                </a>
              </figure>
              <div class="l-books__item__actions">
                <a href="#"><i class="icon icon-book"></i></a>
                <a href="#"><i class="icon icon-audio"></i></a>
                <a href="#"><i class="icon icon-picture"></i></a>
                <a href="#"><i class="icon icon-like"></i></a>
              </div>
              <h3><a href="#">Stanisław Brzozowski</a></h3>
              <h2><a href="#">Wstęp do filozofii</a></h2>
            </article>
          </div>
        </div>
      </div>
    </div>
  {% endcomment %}
{% endblock %}

{% block global-content %}
  <main class="l-main">
    {% if recommended_collection %}
      <section class="l-section">
        <div class="l-collections js-collections">
          <div class="l-collections__header">
            <h3>{{ recommended_collection.title }}</h3>
            <div class="l-your-books__header__actions">
              <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
              <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
            </div>
          </div>
          <div class="l-books">
            {% for book in recommended_collection.get_books %}
              {% include 'catalogue/2022/book_box.html' %}
            {% endfor %}
          </div>
        </div>
      </section>
    {% endif %}

    <section class="l-section">
        <div class="p-homepage__info">
          <div class="p-homepage__info__box">
            {% carousel_2022 'main_2022' %}
          </div>
          <div class="p-homepage__info__box p-homepage__info__box--donate">
            <figure>
              <img src="{% static '2022/images/book-donate.svg' %}" alt="Dorzuć się!">
            </figure>
            <div class="p-homepage__info__box__content">
              <p>
                Nasze książki są dostępne dla tysięcy
                dzieciaków dzięki <strong>darowiznom</strong> od
                osób takich jak <strong>Ty</strong>!
              </p>
              <a href="{% url 'club_join' %}?pk_campaign=home" class="l-button l-button--default l-button--default--dark">Dorzuć się!</a>
            </div>
          </div>
          <div class="p-homepage__info__box p-homepage__info__box--newsletter">
            <figure>
              <img src="{% static '2022/images/book-newsletter.svg' %}" alt="Zapisz się na nasz Newsletter!">
            </figure>
            <div class="p-homepage__info__box__content">
              <h3>
                Zapisz się na nasz <strong>Newsletter!</strong>
              </h3>
              <a href="{% url 'subscribe' %}/?pk_campaign=home" class="l-button l-button--default">Weź udział</a>
            </div>
          </div>
        </div>
    </section>

    <section class="l-section">
      <div class="l-quotes">
        {% for ambassador in ambassadors %}
          <div class="l-quotes__item">
            {% thumbnail ambassador.photo '100x100' crop="center" as ambphoto %}
            <img src="{{ ambphoto.url  }}" alt="{{ ambassador.name }}">
              {% endthumbnail %}
              <h4>{{ ambassador.name }}</h4>
              <p>
                {{ ambassador.text }}
              </p>
          </div>
        {% endfor %}
      </div>
    </section>

    <section class="l-section">
      <div class="p-homepage__info p-homepage__info--second">
        <div class="p-homepage__info__box p-homepage__info__box--full">
          <figure>
            <img src="{% static '2022/images/kid.png' %}" alt="Dorzuć się!">
          </figure>
          <div class="p-homepage__info__box__content">
            <p>
              <strong>Wolne Lektury</strong> to lektury szkolne
              i tysiące innych książek – za <strong>darmo</strong>
              i <strong>bez rejestracji</strong>.
            </p>
            <p>Czytaj i słuchaj online, ściągaj na swój telefon lub komputer, dziel się z innymi.</p>
            <p>Dla uczennic i uczniów dodajemy przypisy, motywy literackie, biogramy i geotagowanie.</p>
            <a href="{% url 'infopage' 'o-projekcie' %}?pk_campaign=wl-infobox" class="l-button l-button--default l-button--default--dark">Dowiedz się więcej</a>
          </div>
        </div>
        <div class="p-homepage__info__box__rows">
          <div class="p-homepage__info__box p-homepage__info__box--full--sm">
            <figure>
              <img src="{% static '2022/images/kid-2.png' %}" alt="Dorzuć się!">
            </figure>
            <div class="p-homepage__info__box__content">
              <p>
                Jesteśmy częścią ruchu <strong>wolnej kultury</strong>!
              </p>
              <a href="https://nowoczesnapolska.org.pl/o-fundacji/?pk_campaign=wl-infobox" class="l-button l-button--default">Dowiedz się więcej</a>
            </div>
          </div>
          <div class="p-homepage__info__box p-homepage__info__box--full--sm">
            <figure>
              <img src="{% static '2022/images/kid-3.png' %}" alt="Dorzuć się!">
            </figure>
            <div class="p-homepage__info__box__content">
              <p>
                Jak budujemy najpopularniejszą <strong>bibliotekę online</strong> w Polsce
              </p>
              <a href="#" class="l-button l-button--default">Dowiedz się więcej</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  {% preview_ad_homepage %}

  <section class="l-section">
    <div class="l-collections js-new-books-slider">
      <div class="l-collections__header">
        <h3>Nowości</h3>
        <div class="l-your-books__header__actions">
          <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
          <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
        </div>
      </div>
      <div class="l-books">
        {% for book in last_published %}
          {% include 'catalogue/2022/book_box.html' %}
        {% endfor %}
      </div>
    </div>
  </section>

  <div class="l-container">
    <section class="l-section">
      <div class="p-homepage__uptodate">
        <div class="p-homepage__uptodate__header">
          <h3>Bądź na bieżąco</h3>
          <ul>
            <li>
              <a href="https://www.facebook.com/wolnelektury/"
                 title="Facebook" tabindex="-1" target="_blank">
                <i class="icon icon-fb" aria-hidden="true"></i>
              </a>
            </li>
            <li>
              <a href="https://www.youtube.com/c/WolneLekturyYT/"
                 title="YouTube" tabindex="-1" target="_blank">
                <i class="icon icon-yt" aria-hidden="true"></i>
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/wolnelektury/"
                 title="Instagram" tabindex="-1" target="_blank">
                <i class="icon icon-ig" aria-hidden="true"></i>
              </a>
            </li>
            <li>
              <a href="https://twitter.com/wolnelektury"
                 title="Twitter" tabindex="-1" target="_blank">
                <i class="icon icon-tt" aria-hidden="true"></i>
              </a>
            </li>
          </ul>
        </div>

        {% sponsor_page 'footer' %}

      </div>
    </section>
  </div>

{% endblock %}