{% extends "layout.html" %}

{% block head %}{{ super() }}{% endblock %}

{% block content %}
  {{ super() }}
  <div class="centerBox">
    {% for entry in media %}
    <div class="social-media-entry">
      <a href="{{ entry["permalink"] }}"
         target="_blank">
        <div style="float: left; margin: 0px 10px;">
          <img class="fit-picture"
            {% 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 %}
               alt="{{ entry["caption"] }}">
        </div>
        <div style="text-align: left">
          <div>
            {{ entry["timestamp"] }}
          </div>
          <div style="overflow: hidden">
            {{ entry["caption"] }}
          </div>
        </div>
      </a>
    </div>
    {% endfor %}
  </div>
{% endblock %}