{% extends '2022/base.html' %}
{% load i18n %}

{% load chunks %}
{% load static %}
{% load thumbnail %}
{% load catalogue_tags %}


{% block global-content %}
  <div class="l-container">
    <div class="l-breadcrumb">
      <a href="/"><span>Strona główna</span></a>
      <a href="/katalog/obraz/"><span>Obrazy</span></a>
    </div>
  </div>


  <main class="l-main">
    <section class="l-section lay-s-col-rev">
      <aside class="l-aside">
        <ul class="l-aside__info">
          <li><span>Epoka:</span> {% for tag in picture.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
          <li><span>Rodzaj:</span> {% for tag in picture.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
          <li><span>Gatunek:</span> {% for tag in picture.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
          {% with extra_info=picture.get_extra_info_json %}
            {% if extra_info.styles %}
              <li>
                <span>{% trans "Style" %}:</span>
                {% for tag in extra_info.styles %}
                  <a>{{ tag }}</a>
                  {% if not forloop.last %}, {% endif %}
                {% endfor %}
              </li>
            {% endif %}

            {% if extra_info.medium %}
              <li>
                <span>{% trans "Medium" %}:</span>
                <a>{{ extra_info.medium }}</a>
              </li>
            {% endif %}

            {% if extra_info.original_dimensions %}
              <li>
                <span>{% trans "Dimensions" %}:</span>
                <a>{{ extra_info.original_dimensions }}</a>
              </li>
            {% endif %}

            <li>
              <span>{% trans "Date" %}:</span>
              <a>{{ extra_info.created_at }}</a>
            </li>
          {% endwith %}

        </ul>
      </aside>
      <div class="l-content">
        <header class="l-header">
          <div class="l-header__content">
            <p>{% for author in picture.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
            </p>
            <h1><a href="{{ picture.get_absolute_url }}">{{ picture.title }}</a></h1>
          </div>
        </header>
        <article class="l-article">
          <div class="c-media">
            <div class="c-media__actions">
              <div class="c-media__btn">
                <a href="{{ picture.image_file.url }}" class="l-button l-button--media"><i class="icon icon-picture"></i> pobierz obraz</a>
              </div>
              <div class="c-media__btn" style="padding-right: 0">
                <a href="{% url 'picture_viewer' picture.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> obejrzyj online</a>
              </div>
            </div>
          </div>

          <div class="l-article__overlay" data-max-height="327" style="margin-top:30px;">
            {% thumbnail picture.image_file "850" upscale=0 as thumb %}
            <a href="{% url 'picture_viewer' picture.slug %}">
              <img class="l-art__preview" src="{{ thumb.url }}" />
            </a>
    {% endthumbnail %}
          </div>
          <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Pokaż więcej" data-action="Pokaż mniej">Pokaż więcej</button>
        </article>
      </div>
    </section>

    {% for tag in picture.authors %}
      <section class="l-section">
        <div class="l-author">
          {% include 'catalogue/2022/author_box.html' %}
        </div>
      </section>
    {% endfor %}

    <section class="l-section">
      <div class="l-themes__wrapper">
        {% if themes %}
          <h2>Motywy obecne na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
          <div class="l-themes l-article__overlay" data-max-height="80">
            <ul>
              {% for item in themes %}
                <li><a href="{% url 'picture_viewer' picture.slug %}#theme-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
              {% endfor %}
            </ul>
          </div>
          <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>

        {% endif %}
        {% if things %}
          <h2>Obiekty na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie obiekty</span> <i class="icon icon-arrow-right"></i></a></h2>
          <div class="l-themes l-article__overlay" data-max-height="80">
            <ul>
              {% for item in things %}
                <li><a href="{% url 'picture_viewer' picture.slug %}#object-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
              {% endfor %}
            </ul>
          </div>
          <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>

        {% endif %}
        <ul class="links">
          {% if picture.wiki_link %}
            <li><a href="{{ picture.wiki_link }}">strona obrazu w Wikipedii</a></li>
          {% endif %}
          <li>
            <a href="{{ picture.xml_url }}">źródłowy plik XML</a>
          </li>
          <li>
            <a target="_blank" href="{{ picture.get_extra_info_json.about }}">obraz na Platformie Redakcyjnej</a>
          </li>
        </ul>
      </div>
    </section>
  </main>





  <section class="l-section">
    <div class="l-books__wrapper">
      <div class="l-container">
        <h2>Czytaj także</h2>
        <dive class="l-books">
          {% related_pictures_2022 picture=picture as related_books %}
          {% for rel in related_books %}
            <article class="l-books__item">
              <figure class="l-books__item__img">
                <a href="{{ rel.get_absolute_url }}">
                  <img src="{% if rel.cover_clean %}{{ rel.cover_clean.url }}{% endif %}" alt="{{ rel.pretty_title }}">
                </a>
              </figure>
              <h3>
                {% for author in rel.authors %}
                  <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
                {% endfor %}
              </h3>
              <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
            </article>
          {% endfor %}

          <article class="l-books__item l-books__item--link">
            <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
            <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
          </article>

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


{% endblock %}