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

{% block title %}Conference Guestbook - {{ conference }}{% endblock %}

{% block body %}

    {% for message in app.flashes('notification') %}
        <div class="alert alert-info alert-dismissible fade show">
        {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    {% endfor %}
    <h2 class="mb-5">
        {{ conference }} Conference
    </h2>

    <div class="row">
        <div class="col-12 col-lg-8">
            {% if comments|length > 0 %}
                {% for comment in comments %}
                    <div class="media shadow border rounded-3 p-3 mb-4">
                        <div class="comment-img me-3">
                            {% if comment.photofilename %}
                                <a href="{{ asset('uploads/photos/' ~ comment.photofilename) }}" target="_blank">
                                    <img src="{{ asset('uploads/photos/' ~ comment.photofilename) }}" />
                                </a>
                            {% endif %}
                        </div>

                        <div class="media-body">
                            <h4 class="font-weight-light mb-0">
                                {{ comment.author }}
                            </h4>

                            <div class="mb-2">
                                <small class="text-muted text-uppercase">
                                    {{ comment.createdAt|format_datetime('medium', 'short') }}
                                </small>
                            </div>

                            <div class="comment-text">
                                {{ comment.text|nl2br }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
                <div>{{ 'nb_of_comments'|trans({count: comments|length}) }}</div>
                {% if previous >= 0 %}
                    <a href="{{ path('conference', { slug: conference.slug, offset: previous }) }}">Previous</a>
                {% endif %}
                {% if next < comments|length %}
                    <a href="{{ path('conference', { slug: conference.slug, offset: next }) }}">Next</a>
                {% endif %}
            {% else %}
                <div class="text-center">
                    No comments have been posted yet for this conference.
                </div>
            {% endif %}
        </div>
        <div class="col-12 col-lg-4">
            <div class="bg-light shadow border rounded-3 p-4">
                <h3 class="font-weight-light">
                    Add your own feedback
                </h3>

                {{ form(comment_form) }}
            </div>
        </div>
    </div>
{% endblock %}