{% extends "base.html" %}
{% block content %}
  <header>
    {% if album.breadcrumb %}
    <h2>
      {% for url, title in album.breadcrumb %}
      <a href="{{ url }}">{{ title }}</a> »
      {% endfor -%}
      <a href="#">{{ media.title }}</a>
    </h2>
    <hr>
    {% endif %}
  </header>

  {% if media %}
  <div class="thumbnail">
    {% if media.type == "image" %}
      <img src="{{ media.url }}" alt="{{ media.title }}" title="{{ media.title }}" />
      <p>{{ media.title }}</p>
    {% endif %}
    {% if media.type == "video" %}
      <video controls>
        <source src='{{ media.url }}' type='video/webm' />
      </video>
    {% endif %}

    <p>
      {% if previous_media %}
      <a href="{{ previous_media.url }}.html">« previous</a>
      {% endif %}
      {% if next_media %}
      <a href="{{ next_media.url }}.html">next »</a>
      {% endif %}
    </p>
  </div>
  {% endif %}
{% endblock %}