{% extends 'base.html.twig' %}

{% block title %}{{ sighting.title }} | Bigfoot{% endblock %}

{% block body %}
<div class="col">
    <div class="sighting-log-container mb-5 pb-5">
        <h2 style="font-size: 1.5rem;">{{ sighting.title }}</h2>
        <p><span class="pr-2"><i class="fa fa-clock"></i> <time datetime="{{ sighting.createdAt|date('Y-m-d H:i') }}">{{ sighting.createdAt|ago }}</time></span>
            |
            <span class="pl-2">Big Foot Believability Score: <span class="badge badge-info">{{ sighting.score }}</span> </span>
        </p>
        <div>
            {{ sighting.description }}
        </div>
    </div>

    <h3>Littlefoot (i.e. Human) Reactions</h3>

    {% for comment in sighting.comments %}
        <div class="comment-container mb-3">
            <div class="row">
                <div class="col-1">
                    <img class="px-1 py-1" src="{{ comment.owner.avatarUrl }}" alt="Avatar for {{ comment.owner.username }}">
                </div>
                <div class="col">
                    <strong>{{ comment.owner.username }}</strong>
                    <span>({{ comment.owner|user_activity_text }})</span>
                    <span class="px-2">|</span>
                    <small><i class="fa fa-clock pr-2"></i><time datetime="{{ comment.createdAt|date('Y-m-d H:i') }}">{{ comment.createdAt|ago }}</time></small>
                    <div class="pt-2">
                        {{ comment.content }}
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="my-2">The little people have not commented yet...</div>
    {% endfor %}

</div>
{% endblock %}

