{#  -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'comments_helper.tmpl' as comments with context %}
{% import 'ui_helper.tmpl' as ui with context %}
{% block sourcelink %}{% endblock %}

{% block content %}
    {{ ui.breadcrumbs(crumbs) }}
    {% if title %}
    <h1>{{ title|e }}</h1>
    {% endif %}
    {% if post %}
    <p>
        {{ post.text() }}
    </p>
    {% endif %}
    {% if folders %}
    <ul>
    {% for folder, ftitle in folders %}
        <li><a href="{{ folder }}"><i
        class="icon-folder-open"></i>&nbsp;{{ ftitle|e }}</a></li>
    {% endfor %}
    </ul>
    {% endif %}

<div id="gallery_container"></div>
{% if photo_array %}
<noscript>
<ul class="thumbnails">
    {% for image in photo_array %}
        <li><a href="{{ image['url'] }}" class="thumbnail image-reference" title="{{ image['title']|e }}">
            <img src="{{ image['url_thumb'] }}" alt="{{ image['title']|e }}" /></a>
    {% endfor %}
</ul>
</noscript>
{% endif %}
{% if site_has_comments and enable_comments %}
    {{ comments.comment_form(None, permalink, title) }}
{% endif %}
{% endblock %}

{% block extra_head %}
{{ super() }}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
    #gallery_container {
        position: relative;
    }
    .image-block {
        position: absolute;
    }
</style>
{% if translations|length > 1 %}
    {% for langname in translations.keys() %}
         {% if langname != lang %}
             <link rel="alternate" hreflang="{{ langname }}" href="{{ _link('gallery', gallery_path, langname) }}">
         {% endif %}
    {% endfor %}
{% endif %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
{% endblock %}

{% block extra_js %}
<script src="/assets/js/justified-layout.min.js"></script>
<script src="/assets/js/gallery.min.js"></script>
<script>
var jsonContent = {{ photo_array_json }};
var thumbnailSize = {{ thumbnail_size }};
renderGallery(jsonContent, thumbnailSize);
window.addEventListener('resize', function(){renderGallery(jsonContent, thumbnailSize)});
</script>
{% endblock %}
