{% extends "Global/layout.html.twig" %}

{% set pagetitle = 'Reviews for %eventname%'|trans({'%eventname%': event.name}) %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    {% set navigation = [{'events': 'Events'|trans, (path('event', { slug : event.name })): (event.name), "current" : (pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ services.getSetting("app_layout") }}">

            <div class="box shadow-none bg-gray mb-4">
                <div class="row">
                    <div class="col-sm-12 col-lg-4 text-center text-lg-left mb-3 mb-lg-0">
                        <span class="center-lg-y text-muted">{{ "%resultsCount% reviews(s) found"|trans({'%resultsCount%': reviews.getTotalItemCount}) }}</span>
                    </div>
                    <div class="col-sm-12 col-lg-4 text-center mb-3 mb-lg-0">
                        <form>
                            <input id="keyword" name="keyword" type="text" class="form-control display-inline-block bg-white" value="{{ app.request.get('keyword') }}" placeholder="{{ "Search in reviews"|trans }}" style="width: auto;">
                            <button type="submit" class="btn btn-primary display-inline-block"><i class="fas fa-search"></i></button>
                        </form>
                    </div>
                    <div class="col-sm-12 col-lg-4 text-center text-lg-right">
                        <label for="sortable-select" class="display-inline">{{ "Sort by"|trans }}
                            <select id="sortable-select" class="form-control display-inline-block bg-white select2 ml-3" data-placeholder="{{ "Select an option"|trans }}" style="width: 50%;">
                                {{ knp_pagination_sortable(reviews, "Rating"|trans ~ ' (' ~ "desc"|trans ~ ')', "r.rating", {"direction": "desc", "criteria": "r.rating"}) }}
                                {{ knp_pagination_sortable(reviews, "Rating"|trans ~ ' (' ~ "asc"|trans ~ ')', "r.rating", {"direction": "asc", "criteria": "r.rating"}) }}
                                {{ knp_pagination_sortable(reviews, "Review date"|trans ~ ' (' ~ "desc"|trans ~ ')', "r.createdAt", {"direction": "desc", "criteria": "r.createdAt"}) }}
                                {{ knp_pagination_sortable(reviews, "Review date"|trans ~ ' (' ~ "asc"|trans ~ ')', "r.createdAt", {"direction": "asc", "criteria": "r.createdAt"}) }}
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <div class="row mb-5 event-scorecard">
                <div class="col-12 col-lg-6">
                    {% set runtimeConfig = {"scale": {"dim": [150, 150] }} %}
                    <img class="img-lazy-load" src="{{ asset('assets/img/loader.gif') }}" data-src="{{ event.getImagePath|imagine_filter('scale', runtimeConfig) }}" />
                    <div class="ml-5 display-inline-block">
                        <h3><a href="{{ path('event', { slug: event.slug }) }}">{{ event.name }}</a></h3>
                        <div class="rating-wrap">
                            <ul class="rating-stars">
                                <li style="width:{{event.getRatingPercentage}}%" class="stars-active">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </li>
                                <li>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </li>
                            </ul>
                            <div class="label-rating">{{ event.getRatingAvg }} {{"out of 5 stars"|trans|lower}}</div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="side">
                        <div>{{ "5 stars"|trans }}</div>
                    </div>
                    <div class="middle">
                        <div class="bar-container">
                            <div class="bar" style="width: {{ event.getRatingsPercentageForRating(5) }}%;"></div>
                        </div>
                    </div>
                    <div class="side right">
                        <div class="text-muted">{{ event.getRatingsPercentageForRating(5) }}%</div>
                    </div>
                    <div class="side">
                        <div>{{ "4 stars"|trans }}</div>
                    </div>
                    <div class="middle">
                        <div class="bar-container">
                            <div class="bar" style="width: {{ event.getRatingsPercentageForRating(4) }}%;"></div>
                        </div>
                    </div>
                    <div class="side right">
                        <div class="text-muted">{{ event.getRatingsPercentageForRating(4) }}%</div>
                    </div>
                    <div class="side">
                        <div>{{ "3 stars"|trans }}</div>
                    </div>
                    <div class="middle">
                        <div class="bar-container">
                            <div class="bar" style="width: {{ event.getRatingsPercentageForRating(3) }}%;"></div>
                        </div>
                    </div>
                    <div class="side right">
                        <div class="text-muted">{{ event.getRatingsPercentageForRating(3) }}%</div>
                    </div>
                    <div class="side">
                        <div>{{ "2 stars"|trans }}</div>
                    </div>
                    <div class="middle">
                        <div class="bar-container">
                            <div class="bar" style="width: {{ event.getRatingsPercentageForRating(2) }}%;"></div>
                        </div>
                    </div>
                    <div class="side right">
                        <div class="text-muted">{{ event.getRatingsPercentageForRating(2) }}%</div>
                    </div>
                    <div class="side">
                        <div>{{ "1 star"|trans }}</div>
                    </div>
                    <div class="middle">
                        <div class="bar-container">
                            <div class="bar" style="width: {{ event.getRatingsPercentageForRating(1) }}%;"></div>
                        </div>
                    </div>
                    <div class="side right">
                        <div class="text-muted">{{ event.getRatingsPercentageForRating(1) }}%</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <main class="mt-lg-0">
                        <div class="card box">
                            <div class="card-body">
                                {% if reviews.getTotalItemCount > 0 %}
                                    <div class="row">
                                        {% for review in reviews %}
                                            {% include "Global/user-review.html.twig" with {review: review, showuser: 1} %}
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    {% include "Global/message.html.twig" with { type: "info", message: ('No review found'|trans), icon: "fas fa-exclamation-circle" } %}
                                {% endif %}
                                {{ knp_pagination_render(reviews, null, {}, {'align': 'center'}) }}
                            </div>
                        </div>
                    </main>
                </div>
            </div>

        </div>
    </section>
{% endblock %}