{% 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"/>
{% if settings.custom_css %}
<link type="text/css" rel="stylesheet" href="static/css/custom.css"  media="screen,projection"/>
{% endif %}
{% 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(3)|reverse %}
  {% if loop.index is divisibleby 3 or loop.index is divisibleby 2 %}
  {% set no_big_gallery_cover = true %}
  {% endif %}
  <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.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>
      </a>
      {% if gallery.cover_type == "video" %}
      {% set video = Video(gallery.cover) %}
      {{ video.copy() }}
      <div class="gallery-cover">
        <video autoplay loop muted class="fillWidth">
          <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
        </video>
        <img class="fillWidth" alt="" src="{{ video.generate_thumbnail("900") }}">
      </div>
      {% else %}
      {% set cover = Image(gallery.cover) %}
      {{ cover.copy() }}
      {% if no_big_gallery_cover %}
      <div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
      {% else %}
      <div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x1366") }}'), url('{{ cover.generate_thumbnail("x900") }}');"></div>
      {% endif %}
      {% endif %}
    </div><!-- comment tricks against space between inline-block
    -->{% endfor %}
  </div>
  {% endfor %}
</div>
<p style="visibility: hidden">.</p>
{% if settings.settings.night_mode %}
<script type="text/javascript" src="./static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript">
if (localStorage.getItem("mode_night") == "true") {
  $('body').addClass('night');
  document.getElementById("toggle-box-checkbox").checked = true;
}

$('#toggle-box-checkbox').on('change', function(){
  if(this.checked){
    $('body').addClass('night');
    localStorage.setItem("mode_night", true);
  }else{
    $('body').removeClass('night');
    localStorage.setItem("mode_night", false);
  }
});
</script>
{% endif %}
{% endblock %}