{% extends "layout.html" %}

{% block content %}

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

  <span class="fa fa-arrow-left"></span> Neuer

  </a>

  <a class="btn btn-secondary" href="/">
      <span class="fa fa-home"></span>
      Gallerie
  </a>

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

  Älter <span class="fa fa-arrow-right"></span>
  </a>
</div>

<div class="pull-left clearfix">
  <h1>{{ image.title }}</h1>
  <div id="image-tags">
    {% for tag in tags %}
    <span class="badge badge-info">{{ tag.tagname }}</span>
    {% endfor %}
  </div>
</div>

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

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

<div id="detail-attributes">
  {% ifequal identity ":creator" %}
  <div class="btn-group pull-right clearfix" role="group">
    <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
      <span class="fa fa-pencil"></span>
      Bearbeiten
    </a>
    <a class="btn btn-danger btn-sm" href="/delete/{{ image.id }}">
      <span class="fa fa-trash"></span>
      Löschen
    </a>
  </div>
  {% endifequal %}

  <p>{{ image.created_at|parse-date|date:"dd.MM.yyyy, HH:mm" }} Uhr</p>
  {% if image.description|length > 0 %}
  <div class="col-md7">
    <p>{{ image.description|markdown-to-html|safe }}</p>
  </div>
  {% endif %}

  <ul class="list-unlisted">
    {% for comment in comments %}
    <li class="media mb-3">
      <a name="{{ comment.id }}"></a>
      <img src="https://robohash.org/{{ comment.author }}?size=50x50" class="d-flex mr-3"/>
      <div class="media-body">
        <h5 class="mt-0 mb-1">{{ comment.author }}</h5>
        {% ifequal identity ":creator" %}
        <a class="btn btn-sm btn-danger" href="/delete-comment/{{ comment.id}}">Löschen</a>
        {% endifequal %}
        {{ comment.comment|markdown-to-html|safe }}
      </div>
    </li>
    {% endfor %}
  </ul>

  <form action="/add-comment/{{ image.id }}" method="POST" class="form-horizontal">
    {% csrf-field %}

    <div class="form-group">
      <label for="author">Name</label>
      <input type="text" name="author" class="form-control"
             value="{{ saved-author }}"
             placeholder="Bitte einen Namen wählen (wird beim nächsten Mal gespeichert)">
    </div>

    <div class="form-group">
      <label for="comment">Kommentar</label>
      <textarea name="comment" class="form-control" rows="3"
                placeholder="Es kann auch Markdown-Syntax verwendet werden"></textarea>
    </div>

    <button type="submit" class="btn btn-success">
      <span class="fa fa-floppy-o"></span>
      Kommentar hinzufügen
    </button>
  </form>
</div>
{% endblock %}