{% extends "base.html" %}

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

  {% block content %}
  <div class="container">
    <div class="row">
  <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 item.wikidata_photo %}
    <img src="{{ url_for("static", filename="wikidata_photo/thumb/" + item.wikidata_photo.0) }}">
  {% endif %}

  {% 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>



  {% for apperance in item.conference_by_time() %}
    {% set conf = apperance.conference %}

    <div>
    <h3>👥 {{ conf.title }}
      <small>📅 {{ conf.start.strftime("%d %b %Y") }}</small>

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

    {%  for event in apperance.events %}
    <div>
      <h4>
        🎤
        <a href="{{ url_for("event_page", event_id=event.id) }}">{{ event.title }}</a>
        <small>
        {% 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>
        </small>
      </h4>
      <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 %}
      <div>
        {% 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>
      </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 %}