{% extends "layout.html" %}

{% block content %}

<div class="btn-group pull-right" role="group">
  {% if next-image %}
  <a class="btn btn-secondary" href="/show/{{ next-image.id }}">
    {% else %}
  <a class="btn btn-secondary disabled" href="#">
    {% endif %}
    Nächstes Bild
  </a>

  {% if prev-image %}
  <a class="btn btn-secondary" href="/show/{{ prev-image.id }}">
  {% else %}
  <a class="btn btn-secondary disabled" href="#">
  {% endif %}
    Vorheriges Bild
  </a>
</div>
<div class="clearfix"></div>

<div class="pull-left">
  <h1>{{ image.title }}</h1>
  <br>
  <p>{{ image.created_at|parse-date|date:"dd-MM-yyyy HH:mm" }}</p>
  <br>
  <div id="image-tags">
    {% for tag in tags %}
    <span class="tag tag-info">{{ tag.tagname }}</span>
    {% endfor %}
  </div>
</div>

<div class="clearfix"></div>

<div class="detail-image">
  <a href="/images/raw/{{ image.hash }}.png">
    <img class="card-img-top" src="/images/raw/{{ image.hash }}.png" alt="{{ image.title }}"/>
  </a>
</div>

{% if image.description|length > 0 %}
<div>
  <p>{{ image.description|markdown-to-html|safe }}</p>
</div>
{% endif %}

{% endblock %}