{% extends "base.html" %}

{% block style %}
<script src="{{ url_for("static", filename="leader-line.min.js") }}"></script>
<style>
  .right-images {
  position: absolute;
  right: -280px;
  top: 0;
  width: 120px;
  }

  .left-images {
  position: absolute;
  right: -140px;
  top: 0;
  width: 120px;
  }



  .image {
      max-width: 100%;
  }

  .container {
    position: relative;
  }
</style>
{% endblock %}

{% set show_images = True %}

{% block title %}Conference archive{% endblock %}

  {% block content %}
  <div class="container">

  {% if show_images %}

  <div class="left-images">
  {% for person, photo in left_photos %}
  <div class="image-container" id="image-{{person.id}}">
     <a href="{{ url_for("person", person_id=person.id) }}">
       <img class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
    </a>
  </div>
  {% endfor %}
  </div>

  <div class="right-images">
  {% for person, photo in right_photos %}
  <div class="image-container">
     <a href="{{ url_for("person", person_id=person.id) }}">
       <img id="image-{{person.id}}" class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
    </a>
  </div>
  {% endfor %}

  </div>
  {% endif %}


    <h1>Conference archive</h1>

    <form action="{{ url_for("search_people") }}">
      <div class="mb-3">
        <label for="q" class="form-label">speaker name</label>
        <input type="text" class="form-control" name="q" id="q">
      </div>
      <button type="submit" class="btn btn-primary">Search</button>
    </form>

    <h3>Speaker/conference frequency distribution</h3>

    <p>Distribution of speakers by conference count.</p>
    {% for conf_count, speaker_count in speaker_counts %}
    <div>
      {{ plural(conf_count, "conference") }}:
      {{ plural(speaker_count, "speaker") }}
    </div>
    {% endfor %}

    <h3>Top speakers</h3>
    <ul>

    {% for person, count in top_speakers %}
    {% if loop.first or loop.previtem[1] != count %}
    <h4>{{ count }} conferences</h4>
    {% endif %}
    <div>
      <span id="person-{{ person.id }}">
      👤
      <a href="{{ url_for("person", person_id=person.id) }}">{{ person.name }}</a>
      ({{ count }} conferences, {{ person.event_count }} talks)
      {% if person.photo_filename() %}📷{% endif %}
      {% if person.wikidata_qid %}
      <a href="https://www.wikidata.org/wiki/{{ person.wikidata_qid }}">Wikidata</a>
      {% endif %}
      </span>
    </div>
    {% endfor %}

</div>
{% endblock %}

{% block script %}
{% if show_images %}
<script>
  {# var person_ids = {{ photo_person_ids | tojson }}; #}
  var left = {{ left | tojson }};
  var right = {{ right | tojson }};
var lines = {};

window.addEventListener('load', function() {

  for(var i =0; i < left.length; i++) {
    var id = left[i];
    var person = document.getElementById('person-' + id);
    var image = document.getElementById('image-' + id);

    var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
    line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});

    var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
    line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});


    // lines[id] = line;
  }

  for(var i =0; i < right.length; i++) {
    var id = right[i];
    var person = document.getElementById('person-' + id);
    var image = document.getElementById('image-' + id);

    var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
    line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});

    var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
    line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});

    // lines[id] = line;
  }



});

</script>
{% endif %}
{% endblock %}