{% extends "./wrapper.html" %}

{% load i18n feedback %}

{% block wrapped %}

    <div class="feedback-row">
        <section class="feedback-col full">
            <section class="pagination">
            
                {% include "./paginator.html" with paginator=paginator page_obj=page_obj %}
            
            </section>
            {% for aggregate in page_obj %}
                <div class="feedback-aggregate__item">
                    <div class="feedback-aggregate__item__title" title="{% blocktrans with total=aggregate.total %}Total amount of votes: {{ total }}{% endblocktrans %}">
                        <h2>
                            {% if aggregate.created_at__year %}
                                {% format_date year=aggregate.created_at__year absolute=django_settings.now period=period %}
                            {% elif aggregate.created_at__month %}
                                {% format_date year=django_settings.now.year month=aggregate.created_at__month period=period %}
                            {% elif aggregate.created_at__hour %}
                                {% format_date hour=aggregate.created_at__hour absolute=aggregate.created_at__date period=period %}
                            {% else %}
                                {% format_date absolute=aggregate.created_at__date period=period %}
                            {% endif %}
                        </h2>
                        {% if aggregate.page %}
                            <h3>{{ aggregate.page }}</h3>
                        {% endif %}
                    </div>
                    <div class="feedback-aggregate__item__value feedback-row">
                        {% if aggregate.positive_percentage > 1 %}
                        <div class="feedback-aggregate__item__positive feedback-col full flex center" title="{% blocktrans with positive_count=aggregate.positive_count %}Amount of positive votes: {{ positive_count }}{% endblocktrans %}">
                            <div class="feedback-aggregate__item__icon">
                                <i>{{ aggregate.positive_count }}</i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16" class="icon-positive">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                                    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.5 3.5 0 0 0 8 11.5a3.5 3.5 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
                                </svg>
                            </div>
                            <h3>{{ aggregate.positive_percentage|floatformat:1 }}%</h3>
                        </div>
                        {% endif %}
                        {% if aggregate.negative_percentage > 1 %}
                            <div class="feedback-aggregate__item__negative feedback-col full flex center" title="{% blocktrans with negative_count=aggregate.negative_count %}Amount of negative votes: {{ negative_count }}{% endblocktrans %}">
                                <div class="feedback-aggregate__item__icon">
                                    <i>{{ aggregate.negative_count }}</i>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 16 16" class="icon-negative">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                                        <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.5 3.5 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.5 4.5 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
                                    </svg>
                                </div>
                                <h3>{{ aggregate.negative_percentage|floatformat:1 }}%</h3>
                            </div>
                        {% endif %}
                    </div>
                    <div class="feedback-aggregate__item__description" title="{% blocktrans with total=aggregate.total %}Total amount of votes: {{ total }}{% endblocktrans %}">
                        {% if aggregate.positive_percentage >= 90 %}
                            <p class="feedback-text perfect"><strong>{% translate "Everyone is happy." %}</strong></p>
                        {% elif aggregate.positive_percentage >= 70 %}
                            <p class="feedback-text good">{% translate "A lot of people are happy." %}</p>
                        {% elif aggregate.positive_percentage >= 60 %}
                            <p class="feedback-text ok">{% translate "The majority is happy." %}</p>
                        {% elif aggregate.positive_percentage > 40 and aggregate.positive_percentage < 60  %}
                            <p class="feedback-text neutral">{% translate "People are split." %}</p>
                        {% elif aggregate.positive_percentage >= 30 %}
                            <p class="feedback-text not-good">{% translate "Most people are unhappy." %}</p>
                        {% elif aggregate.positive_percentage >= 10 %}
                            <p class="feedback-text bad">{% translate "This is very unlikeable." %}</p>
                        {% else %}
                            <p class="feedback-text horrible"><strong>{% translate "Nobody likes this." %}</strong></p>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </section>
        <section class="feedback-col full">
            {% url "page_feedback_api_chart" page.pk as charts_url %}
            {% include "./filters-form.html" with url=charts_url %}
        </section>
    </div>
{% endblock %}
