{% extends "base.html" %}

{% block breadcrumb %}
<ul>
  <li><a href="../../index.html">{{ index_title }}</a></li>
  <li>{{ collection.title }}</li>
</ul>
{% endblock %}

{% block main %}
<p class="description">
  {% if collection.description %}
  {{ collection.description | safe }}
  {% else %}
  {{ collection.short_description }}
  {% endif %}
</p>

<section class="gallery">
  {% for pin in pins %}
  <a href="../../pins/{{ pin.id }}/index.html">
  <div class="gallery-item">
    <div class="name">{{ pin.caption }}</div>
    {% if pin.type == 'photo' %}
    <img src="../../pins/{{ pin.id }}/image.jpg">
    {% elif pin.type == 'video' and 'soundcloud' in pin.display.content %}
    <audio src="../../pins/{{ pin.id }}/media.mp3" controls>
    {% elif pin.type == 'video' %}
    <video src="../../pins/{{ pin.id }}/media.mp4" controls>
    {% elif pin.type == 'audio' %}
    <audio src="../../pins/{{ pin.id }}/media.mp3" controls>
    {% endif %}
  </div>
  </a>
  {% endfor %}
</section>
{% endblock %}