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

{% block title %}{{ data.pdata.data.1|raw }} ({{ regGet('locale') }}){% endblock %}
{% block wrapperClass %}blog blog-detail{% endblock %}

{% block body %}
    {% set currentUrl = regGet('url') ~ regGet('sectionpath') ~ '/' ~ data.pdata.general.item_id ~ '/' ~ data.pdata.data.1|safeString ~ '.htm' %}

    <div class="container clearfix navpadding">
        <a class="back col-md-12 hidden-lg hidden-md hidden-sm" type="submit" href="/{{ regGet('locale') }}/info/blog/">
            <i class="fa fa-angle-left"></i>
            {{ "BTN_BACK"|translate }}
        </a>
        <h1 class="col-md-12">{{ "WELCOME_BLOG"|translate }}</h1>
        <div class="col-md-9 col-sm-12 col-xs-12">

            <article class="content p0 col-md-12 col-sm-12 col-xs-12">
                <div class="user p10">
                    <span class="avatar"> 
                    	<img src="{{ regGet('imgpath') }}cm/{{ data.pdata.data.82|lower|trim }}.jpg">
                    </span>
                    <p class="username">
                        {{ data.pdata.data.82 }} - {{ "AUTHOR"|translate }}
                    </p>
                    <p class="userinfo">
                        {{ showDate(data.pdata.general.creatie, true) }}
                    </p>
                </div>
                <h1 class="col-md-12">{{ data.pdata.data.1|raw }}</h1>
                <div class="blogpost">
                    {% if data.pdata.data.7 is not empty %}
                    <div class="imagearea mb15">
                        <img class="image" src="{{ regGet('imgpath') }}{{ data.pdata.data.7 }}">
                    </div>
                    {% elseif data.pdata.data.4 is not empty %}
                    <div class="imagearea mb15">
                        <img class="image" src="{{ regGet('imgpath') }}{{ data.pdata.data.4 }}">
                    </div>
                    {% endif %}
                    <p class="intro col-md-12">
                        {{ data.pdata.data.3|replace({'{{': '', '}}': ''})|raw }}
                    </p>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12 p0 clearfix">
	                <div class="col-md-6 col-sm-6"></div>
	                <a class="btn btn-primary facebook col-md-3 col-sm-3 col-xs-6"
	                   type="submit"
	                   href="javascript: void(0);"
	                   onclick="shareUrlOnFb('{{ currentUrl }}')">
	                    <i class="fa fa-facebook"></i>
	                    {{ "CAMPAIGNMENU_SHARE"|translate }}
	                </a>
	                <a class="btn btn-primary twitter col-md-3 col-sm-3 col-xs-6"
	                   type="submit"
	                   href="https://twitter.com/intent/tweet?text={{ currentUrl }}">
	                    <i class="fa fa-twitter"></i>
	                    {{ "TWEET"|translate }}
	                </a>
                </div>
                {% if loggedin()%}
                <form onsubmit="SetckContents('reactie','reactieknop');" method="post" action="/ajax/postdata/" id="reactieform_{{ data.pdata.general.item_id }}" name="reactieform" class="reactieform">
                    <div class="loggedin clearfix col-md-12 p0">
                        <h2 class="col-md-12 col-sm-12 mb20">{{ "STR_LNK_REACTIEGEVEN"|translate }}</h2>
                        <div class="user col-md-1 col-sm-1 hidden-xs clearfix">
                            <span class="avatar"> <img src="{{ app.user.id|avatar }}"> </span>
                        </div>
                        <div class="col-md-11 col-sm-11">
                      		<textarea autocomplete="off" autocorrect="off" autocapitalize="off" class="col-md-11 col-sm-11 col-xs-12 ckeditor" rows="6" id="reactie" name="reactie"></textarea>
                      	</div>
                        <br clear="all" />
                        <button class="btn btn-primary yellow mt10 mb25 col-xs-12 col-sm-6 col-md-6" role="button" name="reactieknop" id="reactieknop">
                            <i class="fa fa-comment"></i>
                            {{ "PLACE_COMMENT"|translate }}
                        </button>
                    </div>
                    <div id="coderesponse"></div>
                    {% if data.pdata.general.item_id is defined and data.pdata.general.item_id is not empty %}
                        <input type="hidden" name="item" id="item" value="{{ data.pdata.general.item_id }}"/>
                    {% endif %}
                    <input type="hidden" name="tkst_success" id="tkst_success" value="{{ "STR_CMT_BLOGOK"|translate }}" />
                    <input type="hidden" name="actie" id="actie" value="nieuwsreactie" />
                    <input type="hidden" name="ismacmobile" class="mac" value="0" />
                    
                    <ul id="outputzone">
                        <li class="output" id="output_{{ data.pdata.general.item_id }}"></li>
                    </ul>

                </form>
                {% else %}
                <div class="not-loggedin text-center col-md-12 col-sm-12">
                	<h2 class="col-md-12 col-sm-12">{{ "BLOG_LOGIN_TO_POST"|translate }}</h2>
                    {% set currentPath = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
                    <a href="{{ path('site_login') }}?_target_path={{ currentPath }}"
                       class="loginLink btn btn-primary blue mt10 mb25">
                        {{ "REGISTER_LOGIN"|translate }}</a>
	            </div>
                {% endif %}
                <div class="comments clearfix">
					<div class="col-md-12 col-sm-12 col-xs-12 mb10 clearfix p0">
	                    <h2 class="col-md-12 col-sm-12">{{ "COMMENTS"|translate }}<span>({{ totalItems }})</span></h2>
	                    <div class="reactie_tabs col-md-12 col-sm-12 col-xs-12 mt15 clearfix" id="nieuws_reactietab">
	
	                        <a data-page="1" class="btn pull-right"
	                             onclick="destroyCks();loadData(this,'blogReactions','{{ data.pdata.general.item_id }}', {'reset': true, 'hide': false});">
	                            <span class="clearfix">{{ "ALLE_REACTIES"|translate }}</span>
	                        </a>
	                       <a data-page="1" class="btn pull-right"
	                             onclick="destroyCks();loadData(this,'blogReactions','{{ data.pdata.general.item_id }}', {'type': 1, 'reset': true, 'hide': false});">
	                            <span class="clearfix">{{ "REACTIES_POPULAIRST"|translate }}</span>
	                        </a>
	                       <a data-page="1" class="btn pull-right"
	                             onclick="destroyCks();loadData(this,'blogReactions','{{ data.pdata.general.item_id }}', {'type': 2, 'reset': true, 'hide': false});">
	                            <span class="clearfix">{{ "REACTIES_MEESTBESPROKEN"|translate }}</span>
	                        </a>
	                    </div>
					</div>
                    <div id="messages"></div>
                    <div class="loader"></div>
                    <div data-page="1" class="btn loadingmore col-md-12 col-xs-12 "
                         onclick="loadData(this,'blogReactions','{{ data.pdata.general.item_id }}');">
                        <a class="btn btn-primary blue load-more">
                            <i class="fa fa-navicon"></i>
                        </a>
                        <span class="clearfix">{{ "SHOW_ALL_COMMENTS"|translate }}</span>
                    </div>

                    <input type="hidden" id="host" value="{{ regGet('url') }}">
                    <input type="hidden" id="values" value='{"creationCat": "{{ creationCat }}", "totalItems": "{{ totalItems }}" }'>
                </div>
            </article>

            {#<div class="btn loadingmore col-md-12 col-xs-12">#}
                {#<a class="btn btn-primary blue load-more">#}
                    {#<i class="fa fa-comments"></i>#}
                {#</a>#}
                {#<span class="clearfix">{{ "SHOW_ALL_COMMENTS"|translate }}</span>#}
            {#</div>#}
        </div>
        {% include 'includes/info/latest.reactions.html.twig' with {
        reactions : data.pdata.general.reaction_data|slice(0, 10)
        } %}

    </div>

{% endblock body %}

{% block assetsBottom %}
    {{ parent() }}
    <script type="text/javascript">
        var callback = function(data,t,page){

        };

        function showBlogRequest(formData, jqForm, options) {

        }
        function showBlogResponse(responseText, statusText)  {

            var target = $('#output_' + responseText.target);
            var itemTarget = $('#output_' + responseText.item);

            if (responseText.target && target.length > 0) {
                var reactionButton = $("#reactieknop_" + responseText.target);
                if(responseText.status === 1){
                    target.removeClass().addClass('alert alert-success');
                    setTimeout(location.reload.bind(location), 1500);
                }else{
                    target.removeClass().addClass('alert alert-danger');
                    reactionButton.show(1000);
                }
                target.html(responseText.message);
            } else if (responseText.item && itemTarget.length > 0) {
                var reactionButtonItem = $("#reactieknop");
                if(responseText.status === 1){
                    itemTarget.removeClass().addClass('alert alert-success');
                    setTimeout(location.reload.bind(location), 1500);
                }else{
                    itemTarget.removeClass().addClass('alert alert-danger');

                    reactionButtonItem.show(2000);
                }
                itemTarget.html(responseText.message);
            }
            
        }

        function initEditors()
        {
            loadJS('{{ regGet('jspath') }}blog.js',function() {
                $('.loadingmore').trigger('click');
            });
        }
    </script>
{% endblock %}
{% block readyStateFunction %}
    loadJS('{{ regGet('general_jspath') }}ckeditor_new/ckeditor.js?rand={{ random() }}',initEditors);
{% endblock readyStateFunction %}