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

{% block title %}
    {{ 'INBOX_DETAIL_TITLE'|translate }}
{% endblock %}

{% block wrapperClass %}myspace{% endblock %}

{% block body %}
    <div class="container clearfix navpadding">
        <div class="row">
            <div class="col-md-3 col-sm-5 hidden-xs">
                {{ renderTwigBlock ('includes/user/user.sidebar',{active : 'inbox'}) }}
            </div>
            <div class="col-md-9 col-sm-7 col-xs-12 content-general">
                <a class="back hidden-lg hidden-md hidden-sm" type="submit" href="{{ data.inboxUrl }}">
                    <i class="fa fa-angle-left"></i>
                    {{ 'BTN_BACK'|translate }}</a>
                <h2>{{ readFunnel(data.inbox_text, 1)|raw }}</h2>
                <p class="mb20">{{ readFunnel(data.inbox_text, 3)|raw }}</p>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12 content message">
                        {% for report in data.responses %}
                            {% if loop.index == 1 %}
                                <div class="user commentbox odd mt15">
                            {% else %}
                                {% set commentAlternate = "odd" %}
                                {% if loop.index is even %}
                                    {% set commentAlternate = "even" %}
                                {% endif %}
                                {% if loop.index == 2 %}
                                    <h2 class="pt20">{{ "REACTIONS"|translate }}</h2>
                                {% endif %}
                                <div class="user reaction {{ commentAlternate }} p15">
                            {% endif %}
                            <span class="avatar user {{ report.itsme }}">
                                <img src="{{ report.useravatar | default(avatar) }}" alt="{{ report.displayUsername }}" />
                            </span>
                            <div class="col-md-11 p0 mb5 clearfix">
                                <p class="username">{{ report.displayUsername }}</p>
                                <p class="userinfo">{{ showDate(data.pblTime, true) }}</p>
                            </div>
                            {% if loop.index == 1 %}
                                <div class="col-md-12 p0">
                                    {% if data.campaignItemId is defined %}
                                        <a class="preview" role="button" data-toggle="collapse" href="#collapeReview"
                                           aria-expanded="false" aria-controls="collapeReview">
                                            <i class="fa fa-angle-right"></i> {{ "VIEW_REPORT"|translate }}</a>

                                        <div {% if data.reviewSnippet is null %}class="collapse"{% endif %}
                                             class="collapse" id="collapeReview">
                                            {{ data.reviewSnippet|raw }}
                                            {% if data.editReviewButton is defined %}
                                                <div class="review-feedback" style="margin: 10px 0 30px 0;">
                                                    <a class="btn btn-primary blue mb15"
                                                       href="{{ data.editReviewButton }}"
                                                       aria-expanded="false" aria-controls="reviewCollapse">
                                                        <i class="fa fa-edit"></i> {{ "UPDATE_MY_REVIEW"|translate }}
                                                    </a>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% elseif data.surveyform %}
                                        <a class="preview" role="button" data-toggle="collapse" href="#collapeReport"
                                           aria-expanded="false" aria-controls="collapeReport">
                                            <i class="fa fa-angle-right"></i> {{ "VIEW_REPORT"|translate }}</a>
                                        <div class="{% if data.disableReplyButton is null %}collapse{% endif %} col-md-12"
                                             id="collapeReport">
                                            {{ data.surveyform|raw }}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}

                            {% if loop.index != 1 %}
                                <p class="col-md-11 comment clearfix">
                                    {{ report.translated_text|striptags('<img>')|raw }}
                                </p>
                                <div class="clearfix"></div>
                            {% endif %}
                            </div>
                        {% endfor %}
                        {% if data.campaignIsAlive and data.campaignItemId is not defined and not data.disableReplyButton %}
                            <div class="replybox clearfix col-md-12 p0">
                                <h2 class="pt30">{{ 'REPLY'|translate }}</h2>
                                <div class="user commentbox col-md-12 clearfix">
                                    <span class="avatar user col-md-1 hidden-sm hidden-xs myself">
                                        <img src="{{ data.avatar }}" />
                                    </span>
                                    <form id="formulier" class="svalidate" method="post" name="formulier" action="">
                                    <textarea name="reactionfield" class="col-md-11 col-sm-12 col-xs-12" rows="6" required
                                              id="reactionfield"></textarea>
                                        <button class="btn btn-primary yellow mt10 col-xs-12 col-sm-4 col-md-4"
                                                type="submit"
                                                name="send"
                                                value="">{{ 'STR_BTN_VERZENDEN'|translate }}
                                        </button>
                                        <input type="hidden" name="action" value="reaction"/>
                                        <input type="hidden" name="ref" value="{{ data.id }}"/>
                                        <input type="hidden" name="last_id" value="{{ data.messages.0.latest_id }}"/>
                                    </form>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block readyStateFunction %}
    loadJS('{{ regGet('jspath') }}profile.js');
    $('a.fancybox').fancybox();

    $('.review_stars_read').each(function(i) {
    $(this).raty({
    path: '{{ regGet('general_jspath') }}jraty/',
    readOnly:  true,
    score:$(this).attr('data-score')
    });
    });

    if($('.avatar span.badge').length > 0){
    var a = $('.avatar span.badge').html();
    $('a#inbox').append('<span class="badge">'+a+'</span>');
    }

    initCircle();
{% endblock readyStateFunction %}