{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" href="static/css/materialize.css">
<link rel="stylesheet" href="static/css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="static/css/font-awesome.css">
{% endblock %}

{% block content %}
<!-- Gallery -->
<div id="portfolio" class="cx gray">
  <div class="b e">
    {% for galleries_line in galleries|reverse|batch(1)|reverse %}
    {% for gallery in galleries_line|reverse %}
    <div class="d hx hf gu gallery-item gallery-expand ce polygon">
      <div class="gallery-curve-wrapper">
        <a href="{{ gallery.link }}" class="gallery-cover gray">
          {% if gallery.cover_type == "video" %}
          {% set video = Video(gallery.cover) %}
          {{ video.copy() }}
          {% else %}
          {% set cover = Image(gallery.cover) %}
          {{ cover.copy() }}
          {% endif %}
          <div class="gallery-title">
            <h2>{{ gallery.title }}</h2>
            {% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
            {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
            {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
          </div>
        {% if video %}
        <img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
        <video autoplay loop muted class="fillWidth">
          <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
        </video>
        {% set video = "" %}
        {% else %}
        <img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous">
        {% endif %}
        </a>
      </div>
    </div>
    {% endfor %}
    {% endfor %}
  </div>
</div>

<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('.button-collapse').sideNav();

$(document).ready(function(){
  $('.scrollspy').scrollSpy();
});
</script>
{% endblock %}