{{ header }} 
{% include 'fastor/template/new_elements/wrapper_top.twig' %}

{% if (settings['comments_engine'] == 'FACEBOOK') %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endif %} 

{% set theme_options = registry.get('theme_options') %}
{% set config = registry.get('config') %} 
{% set page_direction = theme_options.get( 'page_direction' ) %} 
{% set language_id = config.get( 'config_language_id' ) %}

{% if (article|length > 0) %}
<div class="post">
    <div class="post-entry">
        {% if (article['gallery']|length > 0) %}
            {% if (article['article_list_gallery_display'] == 'CLASSIC') %}
                <div class="post-media">
                    {{ article['gallery'][0]['output'] }}
                </div>
            {% endif %} 
            {% if (article['article_list_gallery_display'] == 'SLIDER') %}
                <div class="post-media">
                    <div class="media-slider">
                    {% for gallery in article['gallery'] %}
                        <div class="item">{{ gallery['output'] }}</div>
                    {% endfor %} 
                    </div>
                </div>
            {% endif %} 
        {% endif %} 

        <div class="post-content">
            {{ article['content']}}
        </div>
        
        <ul class="meta">
            {% if (author) %}
                <li>{{ text_posted_by }} : <a href="{{ author['href'] }}">{{ author['name'] }}</a></li>
            {% endif %} 
            <li>
                <span class="month">
                    {{ theme_options.date('M', theme_options.strtotime(article['date_published'])) }} 
                </span>
                <span class="day">
                    {{ theme_options.date('d', theme_options.strtotime(article['date_published'])) }},
                </span>
                <span class="day">
                    {{ theme_options.date('Y', theme_options.strtotime(article['date_published'])) }} 
                </span>
            </li>
            {% if (article['categories']|length > 0) %}
            {% set i = 0 %}
            <li class="post-categories">
                <span>{{ text_category }}: </span>
                {% for cat in article['categories'] %}
                {% set i = i + 1 %} 
                <a href="{{ cat['href'] }}">{{ cat['name'] }}</a>{% if (i < article['categories']|length) %}, {% endif %} 
                {% endfor %} 
            </li>
            {% endif %} 
            {% if (settings['comments_engine'] == 'LOCAL') %}
            <li>{{ text_comments}}: {{ article['comments_count']}}</li>
            {% endif %} 
        </ul>
        
        {% if (tags) %} 
        <div class="tags">
            {% set i = 0 %}{% for i in i..tags %} 
                <a href="{{ tags[i]['href'] }}">{{ tags[i]['tag'] }}</a>
            {% endfor %} 
        </div>
        {% endif %} 

        {% if (settings['author_description'] == 1) %}
          {% if (author|length > 0) %}
          <div class="blog-post-author">
              <div class="media">
                  {% if (author['thumb'] is defined) %}
                  <a href="{{ author['href'] }}" class="photo">
                      <img src="{{ author['thumb'] }}" alt="{{ author['name'] }}">
                  </a>
                  {% endif %} 
                  <div class="media-body">
                      <h4 class="media-heading"><a href="{{ author['href'] }}">{{ author['name'] }}</a></h4>
                      <div class="desc">{{ author['description'] }}</div>
                  </div>
              </div>
          </div>
          {% endif %} 
        {% endif %}  
        
     {% if (articles|length > 0 and settings['article_related_status'] == 1) %} 
      {% include 'fastor/template/blog/article_related/' ~ settings['article_related_template']|replace({'.tpl': '.twig'}) %} 
     {% endif %}  
     
     
     {% if (products|length > 0 and settings['product_related_status'] == 1) %} 
       
         {% set class = 3 %}
         {% set id = random(5000)*random(50000) %} 
         {% set all = 4 %} 
         {% set row = 4 %} 
         
         {% if (settings['product_related_per_row'] == 6) %} {% set class = 2 %} {% endif %}
         {% if (settings['product_related_per_row'] == 5) %} {% set class = 25 %} {% endif %}
         {% if (settings['product_related_per_row'] == 3) %} {% set class = 4 %} {% endif %}
         
         {% if (settings['product_related_per_row'] > 1) %}
           {% set row = settings['product_related_per_row'] %}
           {% set all = settings['product_related_per_row'] %}
         {% endif %} 
   
         <div class="box clearfix box-no-advanced box-with-products {% if (settings['product_scroll_related'] == 1) %} {{ 'with-scroll' }} {% endif %}">
           {% if (settings['product_scroll_related'] == 1) %} 
           <!-- Carousel nav -->
           <a class="next" href="#myCarousel{{ id }}" id="myCarousel{{ id }}_next"><span></span></a>
           <a class="prev" href="#myCarousel{{ id }}" id="myCarousel{{ id }}_prev"><span></span></a>
           {% endif %} 
          
           <div class="box-heading">{{ text_related_products }}</div>
           <div class="clear"></div>
           <div class="box-content products related-products">
             <div class="box-product">
              <div id="myCarousel{{ id }}" {% if (settings['product_scroll_related'] == 1) %}class="carousel slide"{% endif %}>
                <!-- Carousel items -->
                <div class="carousel-inner">
                  {% set i = 0 %} {% set row_fluid = 0 %} {% set item = 0 %} {% for product in products %} {% set row_fluid = row_fluid + 1 %} 
                    {% if (i == 0) %} {% set item = item + 1 %} {{ '<div class="active item"><div class="product-grid"><div class="row">' }} {% endif %} 
                    {% set r=row_fluid-(row_fluid/all)|round(0, 'floor')*all %} {% if (row_fluid>all and r == 1) %} {% if (settings['product_scroll_related'] == 1) %} {{ '</div></div></div><div class="item"><div class="product-grid"><div class="row">' }} {% set item = item + 1 %} {% else %} {{ '</div><div class="row">' }} {% endif %} {% else %} {% set r=row_fluid-(row_fluid/row)|round(0, 'floor')*row %} {% if (row_fluid>row and r == 1) %} {{ '</div><div class="row">' }} {% endif %} {% endif %} 
                    <div class="col-sm-{{ class }} col-xs-6">
                      {% include 'fastor/template/new_elements/product.twig' %}
                    </div>
                  {% set i = i + 1 %} {% endfor %} 
                  {% if (i > 0) %} {{ '</div></div></div>' }} {% endif %} 
                </div>
            </div>
             </div>
           </div>
         </div>
     {% endif %}   
       
       {% if (settings['product_scroll_related'] == 1) %} 
         <script type="text/javascript">
         $(document).ready(function() {
           var owl{{ id }} = $(".box #myCarousel{{ id }} .carousel-inner");
          
           $("#myCarousel{{ id }}_next").click(function(){
               owl{{ id }}.trigger('owl.next');
               return false;
             })
           $("#myCarousel{{ id }}_prev").click(function(){
               owl{{ id }}.trigger('owl.prev');
               return false;
           });
             
           owl{{ id }}.owlCarousel({
              slideSpeed : 500,
               singleItem:true,
               {% if (page_direction[language_id] == 'RTL') %} 
               direction: 'rtl'
               {% endif %} 
            });
         });
         </script>
       {% endif %} 
        
        {% if (article['status_comments']) %} 
          {% if (settings['comments_engine'] == 'LOCAL') %}

              <div class="box box-no-advanced comments">
                   <div class="box-heading">{{ text_comments }}: {{ article['comments_count'] }}</div>
                   <div class="box-content">
                        {% if (comments|length > 0) %}
                        <div class="comments-list">
                            {% for comment in comments %}
                            <div class="author"><span class="name">{{ comment['name'] }}</span> <span class="date">{{ theme_options.date('d-m-Y H:i', theme_options.strtotime(comment['date_added'])) }}</span></div>
                                <div class="text">
                                    {{ comment['content'] }} 
                                </div>
                            {% endfor %} 
                        </div> 
                        {% else %} 
                        <p>{{ text_no_comments }}</p>
                        {% endif %} 
                   </div>
              </div>
              
              <div class="box box-no-advanced leave-reply" id="reply-block">
                   <div class="box-heading">{{ text_leave_reply }}</div>
                   <div class="box-content">
                         <p style="padding-top: 5px">{{ text_required_info }}<abbr class="required">*</abbr> </p>
         
                         <form class="form-horizontal" method="post" id="form-comment">
                             <div class="form-group required">
                                 <div class="col-xs-12 col-sm-6">
                                     <label class="control-label" for="input-name">{{ text_name }}</label>
                                     <input type="text" name="name" value="" id="input-name" class="form-control">
                                 </div>
                                 <div class="col-xs-12 col-sm-6">
                                     <label class="control-label" for="input-email">{{ text_email }}</label>
                                     <input type="text" name="email" value="" id="input-email" class="form-control">
                                 </div>
                             </div>
                             <div class="form-group required">
                                 <div class="col-xs-12">
                                     <label class="control-label" for="input-content">{{ text_content }}</label>
                                     <textarea rows="10" id="input-content" name="content" class="form-control"></textarea>
                                 </div>
                             </div>
         
                             <div class="text-center">
                                  <button class="button button-large button-comment" id="button-comment" type="submit">{{ button_post_comment }}</button>
                             </div>
                         </form>
                   </div>
                   
              </div>
              {% endif %} 

              {% if (settings['comments_engine'] == 'DISQUS') %}
                <div style="height: 40px"></div>
                <div id="disqus_thread"></div>
                <script type="text/javascript">
                    /* * * CONFIGURATION VARIABLES * * */
                    var disqus_shortname = '{{ settings['disqus_name'] }}';

                    /* * * DON'T EDIT BELOW THIS LINE * * */
                    (function() {
                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
              {% endif %} 

              {% if (settings['comments_engine'] == 'FACEBOOK') %}
                   <div style="height: 40px"></div>
                  <div class="fb-comments" data-href="{{ theme_options.facebook() }}" data-width="100%"></div>
              {% endif %} 
          {% endif %}
    </div>            
</div>

<script>
    $(function(){
        $('.media-slider').owlCarousel({
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true,
            pagination: true,
            autoHeight : true,
            lazyLoad: true,
            navigationText: false,
            {% if (page_direction[language_id] == 'RTL') %} 
            direction: 'rtl'
            {% endif %} 
        })
        
        $('#button-comment').on('click', function(e) {
            e.preventDefault();
            $.ajax({
                url: 'index.php?route=blog/article/write&article_id={{ article_id }}',
                type: 'post',
                dataType: 'json',
                data: $("#form-comment").serialize(),
                beforeSend: function() {
                    $('#button-comment').button('loading');
                },
                complete: function() {
                    $('#button-comment').button('reset');
                },
                success: function(json) {
                    $('.alert-success, .alert-danger').remove();

                    if (json['error']) {
                        $('.leave-reply .box-content > *:first-child').before('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                    }

                    if (json['success']) {
                        $('.leave-reply .box-content > *:first-child').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

                        $('input[name=\'name\']').val('');
                        $('input[name=\'email\']').val('');
                        $('textarea[name=\'content\']').val('');
                    }
                }
            });
        });
    });
</script>

{% endif %}

{% include 'fastor/template/new_elements/wrapper_bottom.twig' %}
{{ footer }}