{% extends "layout.html" %}

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


<div class="container">
    {% for comment in comments %}
    <hr/>
    <div class="row">
        <div class="col-1">
            <img src="https://robohash.org/{{ comment.author }}?size=40x40" class="d-flex mr-3"/>
        </div>
        <div class="col-11">
            <i>{{ comment.created_at|parse-date|date:"dd-MM-yyyy HH:mm" }}</i>
            from <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>
    </div>
    {% endfor %}
</div>

{% endblock %}