{% extends "base.html" %}


{% load i18n l10n %}
{% load catalogue_tags %}
{% load chunks %}
{% load thumbnail %}
{% load static %}
{% load annoy %}


{% block title %}{{ book.pretty_title }}{% endblock %}


{% block extrahead %}
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
          crossorigin=""></script>
{% endblock %}


{% block menu %}
  <li>
    <a href="{{ book.get_absolute_url }}" id="menu-book" data-box="book-short">
      <span class="label">{% trans "Kliknij, by pobrać" %}:</span>
      <img src="{% if book.cover_clean %}{% thumbnail book.cover_clean '240x332' as thumb %}{{ thumb.url }}{% empty %}{{ book.cover_clean.url }}{% endthumbnail %}{% endif %}"
           width="120" height="166"
           alt="{{ book.pretty_title }}"
           title="{{ book.pretty_title }}">
    </a>
  </li>

  {% if book.other_versions.exists %}
    <li id="menu-other">
      <a href="#" data-box="other">
        <span class="label">{% trans "Inne wersje" %}</span>
      </a>
    </li>
  {% endif %}

  {% if extra_info.logo_mono %}
    {% thumbnail extra_info.logo_mono '200x200' as th %}
    <img src="{{ th.url }}" style="width: 100px; padding: 10px;"
         alt="{{ extra_info.logo_alt|default:'Sponsor' }}"
    >
  {% endthumbnail %}
  {% endif %}



{% endblock menu %}



{% block breadcrumb-right %}
  <div class="l-text_toolbar" id="menu">
    <a href="#info" data-box="info">
      <img src="{% static '2022/images/about.svg' %}" alt="{% trans "Informacje" %}">
    </a>

    <a href="#" data-box="settings" style="display: none;">
      <img src="{% static '2022/images/settings.svg' %}" alt="{% trans "Ustawienia" %}">
    </a>

    <a href="#wltoc" data-box="wltoc" style="display: none;">
      <img src="{% static '2022/images/toc.svg' %}" alt="{% trans "Spis treści" %}">
    </a>




    <div id="info" class="box">
      {% book_info book %}
    </div>


    <div id="settings" class="box">
      <a href="#" class="settings-switch" id="settings-line-numbers"
         data-setting="always-hide-line-numbers"><span>{% trans "Numeracja" %}</span></a>
      <a href="#" class="settings-switch" id="settings-themes"
         data-setting="always-hide-themes"><span>{% trans "Motywy" %}</span></a>
      <a href="#" class="settings-switch" id="settings-annotations"
         data-setting="no-annotations"><span>{% trans "Przypisy" %}</span></a>
      <a href="#" class="settings-switch" id="settings-references"
         data-setting="no-references"><span>{% trans "Pinezki" %}</span></a>
    </div>


    <div id="wltoc" class="box">
      {% if book.parent %}
        {% for b in book.ancestors %}
          {% if forloop.counter > 1 %}
            <li>
          {% endif %}
          <a href="{% if b.html_file %}{% url 'book_text' b.slug %}{% else %}{{ b.get_absolute_url }}{% endif %}">{{ b.title }}</a>
          <ol>
        {% endfor %}
        {% for b in book.get_siblings %}
          <li>
            {% if b == book %}
              <strong>{{ b.title }}</strong>
              <div id="heretoc"></div>
            {% else %}
              <a href="{% url 'book_text' b.get_first_text.slug %}">{{ b.title }}</a>
            {% endif %}
          </li>
        {% endfor %}

        {% for b in book.ancestor.all %}
          </ol>
          {% if not forloop.counter.last %}
            </li>
          {% endif %}
        {% endfor %}
      {% else %}
        <strong>{{ book.title }}</strong>
        <div id="heretoc"></div>
        <ol>
          {% for c in book.get_children %}
            <li><a href="{% url 'book_text' c.get_first_text.slug %}">{{ c.title }}</a></li>
          {% endfor %}
        </ol>
      {% endif %}
    </div>

  </div>
{% endblock %}




{% block main %}
  <div id="global-progress" class="l-container" data-t="{{ book.get_time }}">
    <div class="bar">
      <span class="piece" style="flex-grow: 100;">
        <span class="filled"></span>
      </span>
    </div>
    <div class="progress-text">
      Szacowany czas do końca: <span class="progress-text-value">-</span>
    </div>
  </div>

  <header class="l-text_header">
    <img class="l-text_header_cover" src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}">

    <div class="l-text_header__content">
      <p class="l-text_header_author">{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
      </p>
      <h1 class="l-text_header_title"><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
      {% if book.translators.exists %}
        <p class="l-header__translators">
          {% for translator in book.translators.all %}
            {% if forloop.first and translator.name != 'tłumacz nieznany' %}
              {% trans "tłum." %}
            {% endif %}
            <a href="{{ translator.get_absolute_url }}">
              {{ translator }}</a>{% if not forloop.last %}, {% endif %}
          {% endfor %}
        </p>
      {% endif %}
      <div style="margin-top:1em;">
        {% content_warning book %}
      </div>

      {#% annoy_banner 'book-start' %#}

      <div id="book-text-buttons">
      </div>

    </div>
  </header>


  <article id="main-text" {% if book.has_sync_file %}class="has-sync"{% endif %}>
<div id="sidebar">
      {% if book.other_versions.exists %}
        <div class="box" id="other">
          <h2>{% trans "Inne wersje tekstu" %}</h2>
          <a class="other-text-close" href="#">{% trans "Zamknij drugą wersję" %}</a>
          <ul>
            {% spaceless %}
              {% for other_version in book.other_versions %}
                <li>
                  <a class="display-other"
                     data-other="{{ other_version.html_url }}"
                     href="{% url 'book_text' other_version.slug %}">
                    {{ other_version.mini_box_nolink }}
                  </a>
                </li>
              {% endfor %}
            {% endspaceless %}
          </ul>
        </div>
      {% endif %}
</div>

{% with next=book.get_next_text prev=book.get_prev_text %}
      {% if next %}
        <a class="text_next-book" href="{% url 'book_text' next.slug %}">{{ next.title }}&nbsp;&rarr;</a>
      {% endif %}
      {% if prev %}
        <a class="text_prev-book" href="{% url 'book_text' prev.slug %}">&larr;&nbsp;{{ prev.title }}</a>
      {% endif %}
      <div class="main-text-body">
        {{ book_text|safe }}
      </div>

      <div class="l-checkout__box" style="margin: 2em 0;">
        {% include 'club/donation_step1_form.html' with form=donation_form %}
      </div>
    {% endwith %}






    <article id="other-text">
      <a class="other-text-close" href="#">{% trans "Zamknij" %}</a>
      <div id="other-text-waiter">{% trans "Proszę czekać..." %}</div>
      <div id="other-text-body" style="display: none;"></div>
    </article>

    <div id="reference-box">
      <div id="reference-map"></div>
      <a id="reference-close" href="#">x</a>
      <div id="reference-images">
      </div>
      <a id="reference-link" target="_blank"></a>
    </div>

    <div id="annotation-box"
         data-default-leftoffset="40"
    >
      <div id="annotation">
        <div id="annotation-content"></div>
        <a id="footnote-link">Czytaj w przypisie dolnym</a>
      </div>
      <div class="pointer pointer-bottom"></div>
      <div class="pointer pointer-top"></div>
    </div>

    <div id="qbox" class="qbox"
         data-attach-bottom="true"
    >
      <div class="content">
        <a class="qbox-t-link" href="" title="Skopiuj link"><img src="{% static '2022/images/tool-link.svg' %}" alt="Skopiuj link"></a>
        <a class="qbox-t-copy" href="" title="Skopiuj cytat"><img src="{% static '2022/images/tool-copy.svg' %}" alt="Skopiuj cytat"></a>
        {% if request.user.is_authenticated %}
          <a class="qbox-t-quote" href="" title="Zapisz cytat"><img src="{% static '2022/images/tool-quote.svg' %}" alt="Zapisz cytat"></a>
        {% endif %}
      </div>
      <div class="pointer pointer-bottom"></div>
      <div class="pointer pointer-top"></div>
    </div>

    <div id="zakladka" class="zakladka">
      <div class="icon">
        <img style="height: 30px;" class="icon-empty" src="{% static '2022/images/zakladka.svg' %}" alt="Zakładka">
        <img class="icon-exists" src="{% static '2022/images/zakladka-full.svg' %}" alt="Istniejąca zakładka">
        <img class="icon-note" src="{% static '2022/images/zakladka-note.svg' %}" alt="Notka">
      </div>
      <div id="zakladka-box">
        <div class="content">
          {% if request.user.is_authenticated %}
            <div class="zakladka-tool zakladka-tool_zakladka_delete">
              Usuń zakładkę
            </div>
            <div class="zakladka-tool zakladka-tool_zakladka">
              Dodaj zakładkę
            </div>
            <div class="zakladka-tool zakladka-tool_sluchaj">
              Słuchaj od tego miejsca
            </div>
            <div class="zakladka-tool_notka_text">
              <textarea placeholder="Notatka"></textarea>
              <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" id="notka-save">
                <circle r="7" cx="8" cy="8" fill="none" stroke="black" stroke-width="2px" stroke-dasharray="1,1" />
              </svg>
              <img src="{% static '2022/images/notka-saved.svg' %}" id="notka-saved">
            </div>

          {% else %}
            <div class="zakladka-tool zakladka-tool_login">
              <a href="{% url 'login' %}?next={{ request.path }}">
                Zaloguj się </a>
              /
              <a href="{% url 'register' %}?next={{ request.path }}"> Załóż konto
              </a>
            </div>
            <div class="zakladka-tool zakladka-tool_sluchaj">
              Słuchaj od tego miejsca
            </div>
        </div>
          {% endif %}


            <div class="pointer pointer-bottom"></div>
            <div class="pointer pointer-top"></div>
        </div>
      </div>
</div>


      <div id="annoy-stubs">
        {% annoy_banners 'book-text-intermission' %}

        {% for insert in inserts %}
          {% include 'annoy/dynamic_insert.html' %}
        {% endfor %}
      </div>

  </article>



  {% if book.has_sync_file %}
    <div id="player-bar">
      {% include 'catalogue/snippets/jplayer_reader.html' %}
    </div>
    <script type="application/json" id="smil">
     {{ book.get_sync|safe }}
    </script>
  {% endif %}


  <div id="marker">

  </div>

  {% localize off %}
  <script type="application/json" id="interesting-references">
   {
       {% for ref in book.references %}
       {% if ref.entity.is_interesting %}
       "{{ ref.entity.uri }}": {
           {% if ref.entity.lat and ref.entity.lon %}
           "location": [{{ ref.entity.lat }}, {{ ref.entity.lon }}],
           {% endif %}
           "images": {{ ref.entity.images|safe }},
           "label": "{{ ref.entity.label }}",
           "description": "{{ ref.entity.description }}",
           "wikipedia_link": "{{ ref.entity.wikipedia_link }}"
       },
       {% endif %}
       {% endfor %}
       "": null
   }
  </script>

  {% endlocalize %}

{% endblock main %}