{% load cache %}
{% load i18n %}
{% load static %}
{% load menu %}
{% load latest_blog_posts from blog %}
{% load preview_ad from catalogue_tags %}

<nav class="l-navigation">
  <div class="l-container">
    <a href="/" class="l-navigation__logo">
      <img src="{% static "2022/images/logo.svg" %}" alt="WolneLektury.pl">
    </a>
    <div class="l-naviagion__search">
      <form action="/szukaj/">
        <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10">
      </form>
    </div>
    <div class="l-navigation__actions">
      <div class="l-navigation__user-actions">
        {% include 'user_actions.html' %}
      </div>
      <button class="l-navigation__button js-menu" aria-label="Menu">
        <span class="c-hamburger">
          <span class="bar"></span>
        </span>
      </button>
    </div>
    {% include 'lang-switcher.html' %}

    <div class="l-navigation__menu">
      <div class="scrollable">
        <div class="l-container">

          <div class="l-navigation__user-bar">
            <div class="l-navigation__user-actions">
              {% include 'lang-switcher.html' %}
              {% include 'user_actions.html' %}
            </div>
          </div>

          <div class="l-navigation__menu__blocks">
            <div class="l-navigation__menu__links">
              {% cache 30 menu LANGUAGE_CODE %}
                <ul>
                  <li><strong>{% trans "Katalog" %}</strong></li>
                  {% menu 'Katalog' %}
                </ul>
                <ul>
                  <li><strong>{% trans "Włącz się" %}</strong></li>
                  {% menu 'Włącz się' %}
                </ul>
                <ul>
                  <li><strong>{% trans "Aktualności" %}</strong></li>
                  {% latest_blog_posts %}
                  {% menu 'Aktualności' %}
                </ul>
                <ul>
                  <li><strong>{% trans "Narzędzia" %}</strong></li>
                  {% menu 'Narzędzia' %}
                </ul>
                <ul>
                  <li><strong>{% trans "O nas" %}</strong></li>
                  {% menu 'O nas' %}
                </ul>
              {% endcache %}
            </div>

            <div class="l-navigation__menu__info">

              <div class="l-navigation__menu__book">
                {% preview_ad %}
              </div>

              <div class="l-navigation__menu__social">
                <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>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</nav>

{% block under-menu %}{% endblock %}