{% if blogs is valuableArray %}
    {% for article in blogs %}
        <article class="content p0 col-xs-12">
            <div class="user p10">
                <span class="avatar">
                    <img src="{{ regGet('imgpath') }}cm/{{ readFunnel(article,82)|lower|trim }}.jpg">
                </span>
                <p class="username">
                    {{ readFunnel(article,82)|raw }} - {{ "AUTHOR"|translate }}
                </p>
                <p class="userinfo">
                    {{ showDate(article.start, true) }}
                </p>
            </div>
            {# To make the URL google friendly we need the name, but it may not contain strange characters and spaces #}
            {% set urlName = readFunnel(article,1)|safeString %}
            <a class="blogtitle"
               href="/{{ regGet('locale') }}/campaigns/blogdetail/{{ caItem }}/{{ regGet('countrycodeid') }}/{{ article.item_id }}/{{ urlName }}.htm">
                <h1 class="col-md-12">{{ readFunnel(article,1)|raw }}</h1>
            </a>
            <div class="blogpost">
                {% if readFunnel(article,7) is not empty %}
                    <div class="imagearea mb15">
                        <img class="image" src="{{ regGet('imgpath') }}{{ readFunnel(article,7) }}">
                    </div>
                {% elseif readFunnel(article,4) is not empty %}
                    <div class="imagearea mb15">
                        <img class="image" src="{{ regGet('imgpath') }}{{ readFunnel(article,4) }}">
                    </div>
                {% endif %}
                <p class="intro col-md-12">
                    {{ readFunnel(article,3)|raw }}
                </p>
            </div>

            <a class="btn btn-primary yellow col-sm-6 col-xs-12" type="submit"
               href="/{{ regGet('locale') }}/campaigns/blogdetail/{{ caItem }}/{{ regGet('countrycodeid') }}/{{ article.item_id }}/{{ urlName }}.htm">
                <i class="fa fa-comments"></i>
                {{ "STR_LNK_REACTIEGEVEN"|translate }}
            </a>
            {% if data.social %}
                <a class="btn btn-primary facebook col-sm-3 col-xs-6"
                   type="submit"
                   href="javascript: void(0);"
                   onclick="shareUrlOnFb('{{ regGet('url') }}{{ locale() }}campaigns/blogdetail/{{ caItem }}/{{ regGet('countrycodeid') }}/{{ article.item_id }}/{{ urlName }}.htm')">
                    <i class="fa fa-facebook"></i>
                    {{ "CAMPAIGNMENU_SHARE"|translate }}
                </a>
                <a class="btn btn-primary twitter col-sm-3 col-xs-6"
                   type="submit"
                   href="https://twitter.com/intent/tweet?text={{ regGet('url') }}{{ locale() }}campaigns/blogdetail/{{ caItem }}/{{ regGet('countrycodeid') }}/{{ article.item_id }}/{{ urlName }}.htm">
                    <i class="fa fa-twitter"></i>
                    {{ "TWEET"|translate }}
                </a>
            {% endif %}
            {% if article.reactions|length > 0 %}
                <div class="comments clearfix">
                    <h2 class="col-md-12">
                        {{ "COMMENTS"|translate }}
                        <span>({{ article.reactions.0.aantal_reacties }})</span>
                    </h2>
                    {% for reaction in article.reactions %}
                        {% if loop.index is odd %}
                            {% set commentAlternate = "odd" %}
                        {% else %}
                            {% set commentAlternate = "even" %}
                        {% endif %}
                        {% set communityComment = (reaction.userid in regGet('blogreactions_insider_personeel_ids')) ? 'community-comment' : '' %}
                        <div class="commentbox clearfix {{ commentAlternate }} {{ communityComment }}">
                            <div class="user p0">
                                <span class="avatar col-md-1">
                                    <span class="insiders-icon"></span>
                                    <img src="{{ reaction.avatar }}">
                                </span>
                                <div class="col-md-11 p0 mb5">
                                    <p class="username">
                                        {{ reaction.membername }}
                                    </p>
                                    <p class="userinfo">
                                        {{ showDate(reaction.tijdstip, true) }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-11 pr15 pl0 m0 comment clearfix">
                                <p>{{  truncateHTML(reaction.value, 500)|raw }}</p>
                            </div>

                            {% set subComments = reaction.reacties.0.reacties %}
                            {% if subComments|length > 0 %}
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <a class="btn" role="button" data-toggle="collapse"
                                           href="#collapeOverview{{ reaction.user_session }}" aria-expanded="false"
                                           aria-controls="collapeOverview{{ reaction.user_session }}">
                                            <i class="fa fa-angle-down"></i>
                                            {{ "SHOW_ALL_COMMENTS"|translate }}
                                            ({{ reaction.reacties.0.reacties|length }})</a>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="collapse" id="collapeOverview{{ reaction.user_session }}">
                                            {% for comment in subComments %}
                                                {% set communitySubComment = (comment.userid in regGet('blogreactions_insider_personeel_ids')) ? 'community-comment' : '' %}
                                                <div class="re-comment col-md-12 {{ communitySubComment }}">
                                                    <span class="avatar col-md-1 p0">
                                                        <span class="insiders-icon"></span>
                                                        <img src="{{ comment.avatar }}" alt="" />
                                                    </span>
                                                    <div class="col-md-11 p0 mb5 clearfix">
                                                        <p class="username mb0">
                                                            {{ comment.membername }}
                                                        </p>
                                                        <p class="userinfo mb0">
                                                            {{ 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>
                            {% endif %}
                        </div>
                    {% endfor %}
                    <a href="/{{ regGet('locale') }}/campaigns/blogdetail/{{ caItem }}/{{ regGet('countrycodeid') }}/{{ article.item_id }}/{{ urlName }}.htm"
                       class="btn btn-primary grey col-md-12 col-xs-12" type="submit">
                        <i class="fa fa-angle-right"></i>
                        {{ "READ_ALL_COMMENTS"|translate }} ({{ article.reactions.0.aantal_reacties }})
                    </a>
                </div>
            {% endif %}
        </article>

    {% endfor %}
{% else %}
    <article class="content text-center col-md-12 col-sm-12 col-xs-12">
        <h3 class="no-content">
            {{ "BLOG_NO_POSTS"|translate|raw }}
        </h3>
    </article>
{% endif %}