{% extends "layout.html" %}
{% set pictureId = "ajankohtaista.jpg" %}
{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="/static/ajankohtaista.css">
{% endblock %}

{% block content %}
  {% for entry in media %}
    <div class="someEntry">
      <a href="{{ entry["permalink"] }}"
         target="_blank">
        <img class="somePicture"
             alt="{{ entry["caption"] }}"
          {% if entry["media_type"] == "IMAGE"
          or entry["media_type"] == "CAROUSEL_ALBUM" %}
             src={{ entry["media_url"] }}
          {% elif entry["media_type"] == "VIDEO" %}
             src={{ entry["thumbnail_url"] }}
          {% endif %}>
        <img class="somePictureOverlay"
          {% if entry["media_type"] == "IMAGE" %}
             src="static/media_type_indicators/image.svg"
          {% elif entry["media_type"] == "CAROUSEL_ALBUM" %}
             src="static/media_type_indicators/album.svg"
          {% elif entry["media_type"] == "VIDEO" %}
             src="static/media_type_indicators/video.svg"
          {% endif %}>
      </a>
      <div class="someInfo">
        <div class="someTimestamp">
          <small>{{ entry["timestamp"] }} </small>
        </div>
        <div class="someCaptionShort">
          {{ entry["caption"] }}
        </div>
        <div class="someCaptionLong shadow" onclick="showless(this)">
          {{ entry["caption"] }}
        </div>
        <div class="someCaptionDummy">
          {{ entry["caption"] }}
          <div></div>
        </div>
        <div class="someShowmore" onclick="showmore(this)">
          {% if lang == "fi" %}
            <small> näytä lisää </small>
          {% else %}
            <small> show more </small>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
  <script>
    function showmore(elem) {
      let captionLong = elem.parentNode.querySelector(".someCaptionLong");
      captionLong.style.display = "block";
    }

    function showless(elem) {
      elem.style.display = "none";
    }
  </script>
{% endblock %}