{% extends "base.html" %}

{% block css %}
<link type="text/css" rel="stylesheet" href="static/css/fonts.css"  media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="static/css/style.css"  media="screen,projection"/>
{% endblock %}

{% block logo %}
 {% if sub_index %}
    <div class="back-to-home">
        <hr>
        <a href="../">
            <div id="logo" src="static/img/logo.svg">
                Back
            </div>
        </a>
    </div>
    {% else %}
    <img id="logo" src="static/img/logo.svg"/>
    {% endif %}
{% endblock %}

{% block content %}
<div class="galleries-grid">
  {% for galleries_line in galleries|reverse|batch(1)|reverse %}
  <div class="galleries-line covers-{{ galleries_line|length }}">
    {% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
    --><div class="gallery-square">
      <a href="{{ gallery.link }}">
        <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|local_date("dd MMMM yyyy") }}</div>{% endif %}
          {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags %} <span> {{ tag }}</span> {% endfor %}</div>{% endif %}
        </div>
      </a>
      {% if gallery.cover_type == "video" %}
      {% set video = Video.get(gallery.link, gallery.cover) %}
      {% set vid = video.reencode((1280, 720)) %}
      {% else %}
      {% set cover = Image.get(gallery.link, gallery.cover) %}
      {% endif %}
      {% if video %}
      <div class="gallery-cover">
          <video autoplay loop muted class="fillWidth">
	      <source src="{{gallery.link}/{{ vid }}" type="video/webm" data-source="{{gallery.link}}/{{ vid }}" data-format="vp8" data-extension="webm">
          </video>
	  <img class="fillWidth" alt="" src="{{ gallery.link }}/{{ video.thumbnail((None, 900)) }}">
      </div>
      {% set video = "" %}
      {% else %}
      <div class="gallery-cover" style="background-image: url('{{ gallery.link }}/{{ cover.thumbnail((None, 900)) }}');"></div>
      {% endif %}
    </div><!-- comment tricks against space between inline-block
    -->{% endfor %}
  </div>
  {% endfor %}
</div>
<p style="visibility: hidden">.</p>
{% endblock %}
