{% for i in img_indexes %}
  <div class='imgdiv'>
    <img
      id='img-{{i}}'
      width='1021' height='1448'
      src='/media/korektury/img/{{korekturovanepdf.get_prefix}}-{{i}}.png'
      alt='Strana {{ i|add:1 }}'
      class="strana"
    />
  </div>

  <hr/>
{% endfor %}

<script>
  // Mapování stránka -> korektury
  /**
   * @type {Object.<number, Array<Oprava>>}
   */
  const comments = {
    {% for s in img_indexes %}
      {{s}}: []{% if not forloop.last %},{% endif %}
    {% endfor %}
  };

  // show comment form, when clicked to image
  for (const image of document.getElementsByClassName('strana')) {
    image.addEventListener('click', ev => {
      switch (document.body.dataset.status) {
        case 'zanaseni':
          if (!confirm('Právě jsou zanášeny korektury, opravdu chcete přidat novou?'))
            return;
          break;
        case 'zastarale':
          if (!confirm('Toto PDF je již zastaralé, opravdu chcete vytvořit korekturu?'))
            return;
          break;
      }

      let dx, dy;
      const par = image.parentNode;
      if (ev.pageX != null) {
        dx = ev.pageX - par.offsetLeft;
        dy = ev.pageY - par.offsetTop;
      } else { //IE a další
        dx = ev.offsetX;
        dy = ev.offsetY;
      }
      const img_id = image.id.substring(4);
      commform.show(img_id, dx, dy, '');
      console.log("Pro přesun korektur: strana = " + img_id + ", x = " + dx + ", y = " + dy);
    });
  }
</script>