{% extends "layout.html" %}

{% block content %}
<h1>Kommentarstream</h1>

<ul class="list-unlisted">
  {% for comment in comments %}
  <hr/>
  <li class="media mb-3">
    <img src="https://robohash.org/{{ comment.author }}?size=40x40" class="d-flex mr-3"/>
    <div class="media-body">

      <i>{{ comment.created_at|parse-date|date:"dd-MM-yyyy HH:mm" }} Uhr</i>
      von <strong>{{ comment.author }}</strong>
      <br/>
      <small><a href="/show/{{ comment.image_id }}#{{ comment.id }}">
        {% if comment.title %}
        {{ comment.title }}
        {% else %}
        Zum Bild
        {% endif %}
      </a>
      </small>
      <div>
      {{ comment.comment|markdown-to-html|safe }}
      </div>
    </div>
  </li>
  {% endfor %}
</ul>

{% endblock %}