{% extends "base.html" %}

{% block style %}
<style>
.image-container {
   width: 200px; /* Adjust this to your desired square size */
   height: 240px; /* Same as width for a square */
   display: inline-flex; /* Use inline-flex to display containers horizontally */
   margin-right: 10px; /* Add some spacing between images (adjust as needed) */
   justify-content: center; /* Horizontally center the content */
   align-items: center; /* Vertically center the content */
   overflow: hidden; /* Hide overflowing image parts */
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Crop and scale the image to fit the container */
     object-position: center; /* Center the cropping horizontally */
}
</style>
{% endblock %}

{% set show_images = True %}

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

  {% block content %}
  <div class="container">
    <div class="row">
  <h1>{{ item.title }}</h1>
  <p><a href="{{ url_for("index") }}">home</a></p>

  <div>
    <div>series: {{ item.series.name }}
      {% if item.series.wikidata_qid %}
      <a href="https://www.wikidata.org/wiki/{{ item.series.wikidata_qid }}">Wikidata</a>
      {% endif %}
    </div>
    <div>start: {{ item.start }}</div>
    <div>end: {{ item.end }}</div>
    {% if days %}
      <div>days: {{ item.days }}</div>
    {% endif %}
    {# <div>short name: {{ item.short_name }}</div> #}
    {% if item.venue %}
    {% set country = item.venue.city.country %}
    <div>
      venue: {{ item.venue.name }}
      {% if item.venue.wikidata_qid %}
      <a href="https://www.wikidata.org/wiki/{{ item.venue.wikidata_qid }}">Wikidata</a>
      {% endif %}
    </div>
    <div>
      city: {{ item.venue.city.name }}
      {% if item.venue.city.wikidata_qid %}
      <a href="https://www.wikidata.org/wiki/{{ item.venue.city.wikidata_qid }}">Wikidata</a>
      {% endif %}
    </div>
    <div>country: {{ country.name }} {{ country.flag }}</div>
    {% endif %}
    {% if item.wikidata_qid %}
    <div>wikidata: <a href="https://www.wikidata.org/wiki/{{ item.wikidata_qid }}">{{ item.wikidata_qid }}</a></div>
    {% endif %}
  </div>

  {% if show_images %}
  <div>
  {% for person in item.people %}
  {% if person.wikidata_photo %}
  <span class="image-container">
     <a href="{{ url_for("person", person_id=person.id) }}">
      <img src="{{ url_for("static", filename=person_image_filename(person.id)) }}" alt="{{ person.name}}" title="{{ person.name}}">
    </a>
  </span>
  {% endif %}
  {% endfor %}
  </div>
  {% endif %}

  <h3>Talks</h3>

  <p>{{ item.events.count() }} talks</p>
  {%  for event in item.events %}

  <div>
    <div>
      <p>
        🎤
        <a href="{{ url_for("event_page", event_id=event.id) }}">{{ event.title }}</a><br>

      Speakers:
      {% for p in event.people %}
        👤
        <a href="{{ url_for("person", person_id=p.id) }}">{{ p.name }}</a>
      {% endfor %}<br>

      {% if event.event_date %}
        📅 {{ event.event_date.strftime("%a, %d %b %Y at %H:%M") }}
      {% else %}
        event date missing
      {% endif %}

      <a class="event-detail-toggle" href="#">show details</a><br>



    </p>
    <div class="event-detail" id="event_{{event.id }}" style="display:none">
      {% if event.url %}
      <p><a href="{{ event.url }}">talk on conference website</a></p>
      {% endif %}

    {% if event.abstract %}
    <p class="card-text">
      {% if "<" in event.abstract %}
      {{ event.abstract | safe }}
      {% else %}
      {{ event.abstract }}
      {% endif %}
    </p>
    {% endif %}

    {% if event.description %}
    <p class="card-text">
      {% if "<" in event.description %}
      {{ event.description | safe }}
      {% else %}
      {{ event.description }}
      {% endif %}
    </p>
    {% endif %}

    </div>
  </div>
</div>

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