{% for reaction in reactions %}
    {% if loop.index is odd %}
        {% if "DEFAULT_BLOG_ITEMS_PERPAGE"|translate is odd and currentPage is odd %}
            {% set commentAlternate = "even" %}
        {% else %}
            {% set commentAlternate = "odd" %}
        {% endif %}
    {% else %}
        {% if "DEFAULT_BLOG_ITEMS_PERPAGE"|translate is odd and currentPage is odd %}
            {% set commentAlternate = "odd" %}
        {% else %}
            {% set commentAlternate = "even" %}
        {% endif %}
    {% endif %}
    {% if reaction.user_session is defined %}
        {% set likes = getLikes(reaction.user_session) %}
    {% else %}
        0
    {% endif %}
    {# use an offset of the number of items per page for each page minus the first one #}
    {% if currentPage == 1 %}
        {% set counter = ("DEFAULT_BLOG_ITEMS_PERPAGE"|translate * (currentPage - 1)) + loop.index  %}
    {% else %}
        {% set counter = ("DEFAULT_BLOG_REACTIONS_PERPAGE_LOADMORE"|translate * (currentPage - 1)) + loop.index  %}
    {% endif %}
    <div class="user commentbox {{ commentAlternate }} col-md-12 p0 clearfix ">
		 <div {% if reaction.userid in regGet('blogreactions_insider_personeel_ids') %} class="community-comment"{% endif %}>
	        <span class="avatar user col-md-1">
	        	<span class="insiders-icon"></span>
	            {% if reactionType == 'all' %}
	                <img src="{{ reaction.avatar }}">
	            {% else %}
	                <img src="{{ reaction.reactie.0.avatar }}">
	            {% endif %}
	        </span>
	    

	        <div class="col-md-11 p0 mb5 clearfix">
	            <p class="username">
	                {% if reactionType == 'all' %}
	                    {{ reaction.membername }}
	                {% else %}
	                    {{ reaction.reactie.0.membername|raw }}
	                {% endif %}
	            </p>
	            <p class="userinfo">
	                {{ showDate(reaction.tijdstip, true) }}
	            </p>
	        </div>
	        <div class="col-md-11 col-sm-11 comment p0 clearfix">
	            {% if reactionType == 'all' %}
	                <p> {{ reaction.value|replace({ ('http://'): 'https://' })|raw }}</p>
	            {% else %}
	                <p>{{ reaction.reactie.0.value|replace({ ('http://'): 'https://' })|raw }}</p>
	            {% endif %}
	        </div>
        </div>
        <div class="comment-options col-md-12 col-xs-12 pt20 pr15">
            <p class="col-md-12 pl0 clearfix">
                {% set comments = reactionType == 'all' ? reaction.reacties.0.reacties : reaction.reactie.0.reacties %}
                {% if comments|length > 0 %}
                    <a class="btn" role="button" data-toggle="collapse" href="#collapeOverview{{ counter }}" aria-expanded="false" aria-controls="collapeOverview{{ counter }}">
                        <i class="fa fa-angle-down"></i>

                        {{ "SHOW_ALL_COMMENTS"|translate }} ({% if reaction.reacties.0.reacties is defined %}{{ reaction.reacties.0.reacties|length  }}{% else %}{{ reaction.reactie.0.reacties|length}}{% endif %}
                    </a>
                {% endif %}
                {% if loggedin() %}
                    <a class="btn" role="button" data-toggle="collapse" href="#collapeComment{{ counter }}" aria-expanded="false" aria-controls="collapeComment{{ counter }}">
                        <i class="fa fa-comments"></i>
                        {{ "COMMENT"|translate }}
                    </a>
                    <a class="btn" role="button" href="javascript:void(0);"
                       onclick="updateLikeIt('{{ reaction.user_session }}','{{ "DONT_LIKE_IT"|translate|escape }}','{{ "LIKE_IT"|translate|escape }}');"
                       title="{{ "LIKE_IT"|translate }}"
                       id="like_link_{{ reaction.user_session }}">
                        <i class="fa fa-thumbs-up"></i>
                        <span id="like_text_{{ reaction.user_session }}">{{ "LIKE_IT"|translate }}</span>
                        (<span id="like_linkspan_{{ reaction.user_session }}">{{ likes }}</span>)
                    </a>
                {% endif %}

            </p>

            <div class="collapse" id="collapeComment{{ counter }}">
                <form onsubmit="SetckContents('reactie_{{ reaction.user_session }}','reactieknop_{{ reaction.user_session }}');"
                      data-relid="{{ reaction.user_session }}"
                      method="post" action="/ajax/postdata/"
                      name="reactieform" class="reactieform" id="reactieform_{{ reaction.user_session }}">
                    <div class="loggedin re-comment clearfix col-md-12 col-xs-12">
                        <div class="user p0">
                            <span class="avatar col-md-1 col-sm-1 hidden-xs p0">
                                <img alt="avatar" src="{{ app.user.id|avatar }}">
                            </span>
                        </div>
                       	<div class="col-md-11 col-sm-11 col-xs-12 p0">
							<textarea class="col-md-11 col-xs-12 ckeditor" rows="4" id="reactie_{{ reaction.user_session }}" name="reactie"></textarea>
                       	</div>
                        <button class="btn btn-primary col-md-4 col-sm-4 col-xs-12 yellow mt10" role="button" name="reactieknop" id="reactieknop_{{ reaction.user_session }}" >
                            <i class="fa fa-comment"></i>
                            {{ "PLACE_COMMENT"|translate }}
                        </button>
                    </div>
                    <input type="hidden" name="tkst_success" id="tkst_success" value="{{ "STR_CMT_BLOGOK"|translate }}" />
                    <input type="hidden" name="actie" id="actie" value="nieuwsreactie" />
                    {% if reaction.itemid is defined and reaction.itemid is not empty %}
                        <input type="hidden" name="item" id="item" value="{{ reaction.itemid }}"/>
                    {% endif %}
                    {% if campaign is defined and campaign is not null %}
                        <input type="hidden" name="campaign" id="campaign" value="{{ campaign }}"/>
                    {% endif %}
                    <input type="hidden" name="ismacmobile" class="mac" value="0" />
                    <input type="hidden" name="type" id="type" class="mac" value="{{ data.type }}" />
                    <input type="hidden" name="token" id="token"
                           value="{{ ("SALT"|translate ~ reaction.user_session ~ data.type)|md5 }}" />
                    <input type="hidden" name="user_session" value="{{ reaction.user_session  }}">
                    <input type="hidden" name="loginreferer" value="{{ regGet('fullcurrenturl') }}" />
                    <input type="hidden" name="title" value="{{ reaction.blogtitle }}" />
                    <ul id="outputzone">
                        <li class="outputreactieform" id="output_{{ reaction.user_session }}"></li>
                    </ul>
                </form>
            </div>
            <div class="collapse" id="collapeOverview{{ counter }}">
                {% for comment in comments %}
                    <div class="re-comment col-md-12 col-sm-12 col-xs-12 clearfix {% if comment.userid in regGet('blogreactions_insider_personeel_ids') %} community-comment {% endif %}">
                        <span class="avatar col-md-1 col-sm-1 p0">
                        	<span class="insiders-icon"></span>
                            <img src="{{ comment.avatar }}">
                        </span>
                        <div class="col-md-11 p0 mb5 clearfix">
                            <p class="username">
                                {{ comment.membername }}
                            </p>
                            <p class="userinfo">
                                {{ showDate(comment.tijdstip, true) }}
                            </p>
                        </div>
                        <p class="col-md-11 comment p0 clearfix">
                            {{ comment.value|striptags('<img>')|raw }}
                        </p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endfor %}