{# -*-jinja2-*- #}
{% extends "layout.html" %}
{% block content %}
<h1>{{post.title}}</h1>
{{post.html |  safe}}
{% if post.links.images |length > 0 %}

<hr/>


<!-- The Gallery as lightbox dialog, should be a document body child element -->
<div id="blueimp-gallery" class="blueimp-gallery">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

<div id="links">
  {% for d in post.links.images %}
  <a href="{{d.url}}" title="{{d.title}}">
    <img src="{{d.thumb_url}}" alt="{{d.title}}" />
  </a>
  {% endfor %}
</div>
<script src="/gallery/js/blueimp-gallery.min.js"></script>
<script>
  document.getElementById('links').onclick = function(event) {
  event = event || window.event
  var target = event.target || event.srcElement,
  link = target.src ? target.parentNode : target,
  options = { index: link, event: event },
  links = this.getElementsByTagName('a')
  blueimp.Gallery(links, options)
  }
  </script>


{% endif %}

{% endblock %}