{% extends "base.html" %}

{% block title %}{{ item.name }}{% endblock %}

  {% block style %}
  <style>
  .image-container {
    float: right;
    width: 300px;
  }

  .image {
      max-width: 100%;
  }
  .text-nowrap {
    white-space: nowrap;
  }
  </style>
  {% endblock %}



  {% block content %}
  <div>
    <div>

  {% set photo = item.photo_filename() %}
  {% if photo %}
  <div class="image-container">
    <img class="image" src="{{ url_for("static", filename=photo) }}">
  </div>
  {% endif %}


  <h1>{{ item.name }}</h1>

  <p>
  👥 {{ plural(item.conference_count,  "conference") }}<br/>
  🎤 {{ plural(item.event_count, "talk") }}<br/>
  {% set start, end = item.active_years() %}
  📅 Years active: {{ start.year }} to {{end.year }}
  {% if item.wikidata_qid %}
  <br/>
  📊 Wikidata: <a href="https://www.wikidata.org/wiki/{{ item.wikidata_qid }}">{{ item.wikidata_qid }}</a>
  {% endif %}
  </p>

  {% if is_admin() %}
  {% set search_for = item.name + ' ' + " haswbstatement:P31=Q5" %}
  <p><a href="https://www.wikidata.org/w/index.php?search={{ search_for | urlencode }}&title=Special%3ASearch&ns0=1&ns120=1">Search for {{ item.name }} on Wikidata</a></p>

  <form method="POST">
    <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" name="name" id="name" value="{{ item.name }}">
    </div>
    <div class="mb-3">
      <label for="wikidata_qid" class="form-label">Wikidata QID</label>
      <input type="text" class="form-control" name="wikidata_qid" id="wikidata_qid" value="{{ item.wikidata_qid or "" }}">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <form method="POST" action="{{ url_for("delete_person", person_id=item.id) }}">
    <button type="submit" class="btn btn-primary">delete</button>
  </form>

  {% if show_wikidata_matches %}
  {% if wikidata_hits %}
  <p>Possible Wikidata matches</p>
      <ul>
      {% for hit in wikidata_hits %}
        <li>
          <a href="https://www.wikidata.org/wiki/{{ hit.qid }}">{{ hit.qid }}</a>
          {{ hit.label }} &mdash; {{ hit.description }}
        </li>
      {% endfor %}
      </ul>
  {% elif not item.wikidata_qid %}
  <p>No similar names found on Wikidata</p>
  {% endif %}
  {% endif %}
  {% endif %}

  {% set bio_source = item.bio_source() %}
  {% if bio_source %}
  <h2>Biography</h2>
  <blockquote>
    <div>{{ bio_source.bio | safe }}</div>
    <div>&mdash; biography from
      <a href="{{ url_for("conference_page", short_name=bio_source.conference.short_name) }}">{{ bio_source.conference.title }}</a><br>
      <a href="{{ bio_source.url }}">{{ bio_source.url }}</a>
    </div>
  </blockquote>
  {% else %}
  <p>No biography available.</p>
  {% endif %}


  <h2>Conferences</h2>
  <p>{{ item.conferences_association.count() }} known conferences</p>
  {% for apperance in item.conference_by_time() %}
    {% set conf = apperance.conference %}

    <div>
    <h3>👥
      <a href="{{ url_for("conference_page", short_name=conf.short_name) }}">{{ conf.title }}</a>
      <small>📅 {{ conf.start.strftime("%d %b %Y") }}</small>

    </h3>
    {% if 0 and apperance.bio %}<p>Biography: {{ apperance.bio | safe }}</p>{% endif %}
    </div>

    {%  for event in apperance.events %}
    <div>
        &nbsp;&nbsp;🎤
        <a href="{{ url_for("event_page", event_id=event.id) }}">{{ event.title }}</a><br>
        &nbsp;&nbsp;
        <span class="text-nowrap">
        {% if event.event_date %}
          {{ event.event_date.strftime("%d %b %Y") }}
        {% else %}
          event date missing
        {% endif %}

        <a class="event-detail-toggle" href="#">show details</a>
        </span>
      <div class="event-detail" id="event_{{event.id }}" style="display:none">

      <p>
        {% if event.url %}
        <a href="{{ event.url }}">talk on conference website</a>
        {% endif %}
      <p>

      {% if event.abstract %}
      <div>
        {% if "<" in event.abstract %}
        {{ event.abstract | safe }}
        {% else %}
        {{ event.abstract }}
        {% endif %}
      </div>
      {% endif %}

      {% if event.description %}
      <div>
        {% if "<" in event.description %}
        {{ event.description | safe }}
        {% else %}
        {{ event.description }}
        {% endif %}
      </div>
      {% endif %}
      {% if event.people_detail.count() > 1 %}
      <div>
        Other people:
        {% for p in event.people %}
          {% if p.id != item.id %}
          <a href="{{ url_for(request.endpoint, person_id=p.id) }}">{{ p.name }}</a>
          {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      </div>
    </div>

    {% endfor %}



  {% endfor %}


  </div>
  </div>
{% endblock %}

{% block script %}
<script>
  // Get all elements with the class "event-detail-toggle"
  var toggleLinks = document.querySelectorAll(".event-detail-toggle");

  // Loop through each toggle link and attach a click event handler
  toggleLinks.forEach(function(link) {
    link.addEventListener("click", function(e) {
      e.preventDefault(); // Prevent the default link behavior

      // Find the parent div of the clicked link
      var parentDiv = this.closest("div");

      // Find the element with class "event-detail" inside the parent div
      var detailElement = parentDiv.querySelector(".event-detail");

      // Toggle the display of the detail element
      if (detailElement.style.display === "none" || detailElement.style.display === "") {
        detailElement.style.display = "block";
        this.textContent = "hide detail"; // Change the link text
      } else {
        detailElement.style.display = "none";
        this.textContent = "show detail"; // Change the link text
      }
    });
  });
</script>
{% endblock %}