{{ header }}
<div id="container" class="container j-container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ breadcrumb.href }}" itemprop="url"><span itemprop="title">{{ breadcrumb.text }}</span></a></li>
    {% endfor %}
  </ul>
  {{ column_left }}{{ column_right }}
  <div id="content" class="blog-post">
    <h1 class="heading-title">{{ heading_title }}</h1>{{ content_top }}

    <div class="post-stats comment-date">
      {% if post_author %}
        <span class="p-posted">{{ journal2.settings.get('blog_posted_by_text', 'Posted by') }}</span>
        <span class="p-author">{{ post_author }}</span>
      {% endif %}
      <span class="p-date">{{ post_date | date(date_format_short) }}</span>
      <span class="p-comment">{{ comments|length }} {{ journal2.settings.get('blog_comment_text', 'Comment(s)') }}</span>
      {% if post_categories %}
        <span class="p-category">
          {% for category in post_categories %}
            <a href="{{ category.href }}">{{ category.name }}</a><span>,</span>
          {% endfor %}
        </span>
      {% endif %}
    </div>

    <div class="post-details">
      {{ post_content }}

      {% if post_tags %}
        <div class="tags">
          <b>{{ text_tags }}</b>

          {% for tag in post_tags %}
            <a href="{{ tag.href }}">{{ tag.name }}</a>
          {% endfor %}
        </div>
      {% endif %}

      {% if journal2.settings.get('config_blog_settings.share_this') and (journal2.settings.get('config_share_buttons', []) | length > 0) %}
        <div class="social share-this">
          <div class="social-loaded">
            <script type="text/javascript">var switchTo5x = true;</script>
            <script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
            <script type="text/javascript">stLight.options({publisher: "{{ journal2.settings.get('share_buttons_account_key') }}", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
            {% for item in journal2.settings.get('config_share_buttons', []) %}
              <span class="{{ item.class }}{{ journal2.settings.get('share_buttons_style') }}" displayText="{{ journal2.settings.get('share_buttons_style') ? item.name : '' }}"></span>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>

    {% if allow_comments %}
      <div class="comments">
        {% if comments | length > 0 %}
          <h3>{{ comments | length }} {{ journal2.settings.get('blog_comment_text', 'Comment(s)') }}</h3>
        {% endif %}
        {% for comment in comments %}
          <div class="comment" data-comment-id="{{ comment.comment_id }}" data-has-form="false">
            <a name="c{{ comment.comment_id }}"></a>
            {{ staticCall('Journal2Utils', 'gravatar', [comment.email, default_author_image, 70, '']) }}

            <div class="main-comment">
              <div class="user-name">{{ comment.name }}:</div>
              <div class="user-date">{{ comment.date | date(date_format_short) }}, <span class="user-time">{{ comment.date | date(time_format) }}{% if comment.website %}, <span class="user-site"><a href="{{ comment.website }}" target="_blank" rel="nofollow">{{ comment.website }}</a></span>{% endif %}</div>
              <a class="button reply-btn">{{ journal2.settings.get('blog_reply_button', 'Reply') }}</a>
              <p>{{ comment.comment }}</p>
            </div>

            {% for reply in comment.replies %}
              <div class="reply">
                {{ staticCall('Journal2Utils', 'gravatar', [reply.email, default_author_image, 70, '']) }}

                <div class="comment">
                  <div class="user-name">{{ reply.name }}:</div>
                  <div class="user-date">{{ reply.date | date(date_format_short) }}, <span class="user-time">{{ reply.date | date(time_format) }}</span></div>
                  <p>{{ reply.comment }}</p>
                </div>
              </div>
            {% endfor %}
          </div>
        {% endfor %}

        <div class="post-comment">
          <h3>{{ journal2.settings.get('blog_leave_comment_text', 'Leave a Comment') }}</h3>
          <div class="comment-form">
            <form>
              <div>
                <input type="text" name="name" placeholder="{{ journal2.settings.get('blog_form_name', 'Name') }}" value="{{ default_name }}"/>
                <input type="text" name="email" placeholder="{{ journal2.settings.get('blog_form_email', 'Email') }}" value="{{ default_email }}"/>
                <input type="text" name="website" placeholder="{{ journal2.settings.get('blog_form_website', 'Website') }}"/>
              </div>
              <div>
                <textarea name="comment" placeholder="{{ journal2.settings.get('blog_form_comment', 'Comment') }}"></textarea>
              </div>
              <a class="button comment-submit">{{ journal2.settings.get('blog_form_submit', 'Submit') }}</a>
            </form>
          </div>
        </div>
      </div>
    {% endif %}

    {% if related_products %}
      <div class="box related-products {% if carousel %} journal-carousel {% if journal2.settings.get('related_products_carousel_arrows') == 'top' %} arrows-top {% endif %} {% endif %}">
        <div>
          <div class="box-heading">{{ tab_related }}</div>
          <div class="box-content">
            {% if carousel %}
            <div class="swiper">
              <div class="swiper-container" {% if journal2.settings.get('rtl') %} dir="rtl" {% endif %}>
                <div class="swiper-wrapper">
                  {% endif %}
                  {% for product in related_products %}
                    <div class="product-grid-item {{ grid_classes }} {% if carousel %} swiper-slide {% endif %} display-{{ journal2.settings.get('product_grid_wishlist_icon_display') }} {{ journal2.settings.get('product_grid_button_block_button') }}">
                      <div class="product-thumb product-wrapper {% if product.labels and product.labels.outofstock %} outofstock {% endif %}">
                        <div class="image {% if journal2.settings.get('show_countdown', 'never') != 'never' and product.date_end %} has-countdown {% endif %}">
                          <a href="{{ product.href }}" {% if product.thumb2 %} class="has-second-image" style="background: url('{{ product.thumb2 }}') no-repeat" {% endif %}>
                            <img class="lazy first-image" width="{{ journal2.settings.get('config_image_width') }}" height="{{ journal2.settings.get('config_image_height') }}" src="{{ journal2.settings.get('product_dummy_image') }}" data-src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}"/>
                          </a>
                          {% for label, name in product.labels %}
                            <span class="label-{{ label }}"><b>{{ name }}</b></span>
                          {% endfor %}
                          {% if journal2.settings.get('product_grid_wishlist_icon_position') == 'image' and journal2.settings.get('product_grid_wishlist_icon_display') == 'icon' %}
                            <div class="wishlist"><a onclick="addToWishList('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_wishlist }}"><i class="wishlist-icon"></i><span class="button-wishlist-text">{{ button_wishlist }}</span></a></div>
                            <div class="compare"><a onclick="addToCompare('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_compare }}"><i class="compare-icon"></i><span class="button-compare-text">{{ button_compare }}</span></a></div>
                          {% endif %}
                        </div>
                        <div class="product-details">
                          <div class="caption">
                            <h4 class="name"><a href="{{ product.href }}">{{ product.name }}</a></h4>
                            <p class="description">{{ product.description }}</p>
                            {% if product.price %}
                              <div class="price">
                                {% if not product.special %}
                                  {{ product.price }}
                                {% else %}
                                  <span class="price-old">{{ product.price }}</span> <span class="price-new">{{ product.special }}</span>
                                {% endif %}
                              </div>
                            {% endif %}
                            {% if product.rating %}
                              <div class="rating">
                                {% for i in 1..5 %}
                                  {% if product.rating < i %}
                                    <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                  {% else %}
                                    <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                  {% endif %}
                                {% endfor %}
                              </div>
                            {% endif %}
                          </div>
                          <div class="button-group">
                            {% if staticCall('Journal2Utils', 'isEnquiryProduct', [null, product]) %}
                              <div class="cart enquiry-button">
                                <a href="javascript:Journal.openPopup('{{ journal2.settings.get('enquiry_popup_code') }}', '{{ product.product_id }}');" data-clk="addToCart('{{ product.product_id }}');" class="button hint--top" data-hint="{{ journal2.settings.get('enquiry_button_text') }}">{{ journal2.settings.get('enquiry_button_icon') }}<span class="button-cart-text">{{ journal2.settings.get('enquiry_button_text') }}</span></a>
                              </div>
                            {% else %}
                              <div class="cart {% if product.labels and product.labels.outofstock %} outofstock {% endif %}">
                                <a onclick="addToCart('{{ product.product_id }}', '{{ product.minimum }}');" class="button hint--top" data-hint="{{ button_cart }}"><i class="button-left-icon"></i><span class="button-cart-text">{{ button_cart }}</span><i class="button-right-icon"></i></a>
                              </div>
                            {% endif %}
                            <div class="wishlist"><a onclick="addToWishList('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_wishlist }}"><i class="wishlist-icon"></i><span class="button-wishlist-text">{{ button_wishlist }}</span></a></div>
                            <div class="compare"><a onclick="addToCompare('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_compare }}"><i class="compare-icon"></i><span class="button-compare-text">{{ button_compare }}</span></a></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                  {% if carousel %}
                </div>
              </div>
              {% if journal2.settings.get('related_products_carousel') and journal2.settings.get('related_products_carousel_arrows') != 'none' %}
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              {% endif %}
              {% endif %}
            </div>
            {% if journal2.settings.get('related_products_carousel') and journal2.settings.get('related_products_carousel_bullets') %}
              <div class="swiper-pagination"></div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endif %}
    {{ content_bottom }}
  </div>
  {% if carousel %}
    {% set grid = staticCall('Journal2Utils', 'getItemGrid', [journal2.settings.get('config_blog_settings.related_products_per_row.value'), journal2.settings.get('site_width', 1024), journal2.settings.get('config_columns_count', 0)]) %}
    {% set grid = [
    [0, grid.xs],
    [470, grid.sm],
    [760, grid.md],
    [980, grid.lg],
    [1100, grid.xl],
    ] %}
    <script>
      (function () {
        var grid = $.parseJSON('{{ grid | json_encode() }}');

        var breakpoints = {
          470: {
            slidesPerView: grid[0][1],
            slidesPerGroup: grid[0][1]
          },
          760: {
            slidesPerView: grid[1][1],
            slidesPerGroup: grid[1][1]
          },
          980: {
            slidesPerView: grid[2][1],
            slidesPerGroup: grid[2][1]
          },
          1220: {
            slidesPerView: grid[3][1],
            slidesPerGroup: grid[3][1]
          }
        };

        var opts = {
          slidesPerView: grid[4][1],
          slidesPerGroup: grid[4][1],
          breakpoints: breakpoints,
          spaceBetween: parseInt('{{ journal2.settings.get('product_grid_item_spacing', '15') }}', 10),
          pagination: {% if journal2.settings.get('related_products_carousel_bullets') %} $('.related-products .swiper-pagination') {% else %} false {% endif %},
          paginationClickable: true,
          nextButton: {% if journal2.settings.get('related_products_carousel_arrows') != 'none' %} $('.related-products .swiper-button-next') {% else %} false {% endif %},
          prevButton: {% if journal2.settings.get('related_products_carousel_arrows') != 'none' %} $('.related-products .swiper-button-prev') {% else %} false {% endif %},
          autoplay: {{ journal2.settings.get('related_products_carousel_autoplay') > 0 ? 4000 : 'false' }},
          autoplayStopOnHover: {% if journal2.settings.get('related_products_carousel_pause_on_hover') %} true {% else %} false {% endif %},
          speed: 400,
          touchEventsTarget: {% if journal2.settings.get('related_products_carousel_touchdrag') %} 'container' {% else %} false {% endif %}
        };

        $('.related-products .swiper-container').swiper(opts);
      })();
    </script>
  {% endif %}
  <script>
    function generateComment($form, cls, $appendTo, callback) {
      $form.find('.has-error').removeClass('has-error');
      $.post('index.php?route=journal2/blog/comment&post_id={{ post_id }}', $form.serializeArray(), function (response) {
        if (response.status === 'success') {

          if (response.data) {
            var html = '';
            html += '<div class="' + cls + '" data-comment-id="' + response.data.comment_id + '" data-has-form="false">';
            html += response.data.avatar;
            html += '<div class="main-comment">';
            html += '<div class="user-name">' + response.data.name + ':</div>';
            html += '<div class="user-date">' + response.data.date + ', <span class="user-time">' + response.data.time + '</span>';
            if (response.data.website) {
              html += ', <span class="user-site"><a href="' + response.data.href + '" target="_blank">' + response.data.website + '</a></span>';
            }
            html += '</div>';
            html += '<a class="button reply-btn">{{ journal2.settings.get('blog_reply_button', 'Reply') }}</a>';
            html += '<p>' + response.data.comment + '</p>';
            html += '</div>';

            $appendTo.before(html);
          }

          callback && callback(response.message);
        }

        if (response.status === 'error') {
          $.each(response.errors, function (i, field) {
            $form.find('[name="' + field + '"]').addClass('has-error');
          });
        }
      }, 'json');
    }

    $('.reply-btn').live('click', function () {
      var $comment = $(this).closest('.comment');
      if ($comment.attr('data-has-form') === 'false') {
        var $form = $('.post-comment form').clone();
        $form.find('.has-error').removeClass('has-error');
        $form.append('<input type="hidden" name="parent_id" value="' + $comment.attr('data-comment-id') + '" />');
        $form.find('a').removeClass('comment-submit').addClass('reply-submit');
        $comment.append('<div class="reply-form"><h3>{{ journal2.settings.get('blog_leave_reply_text', 'Leave a Reply') }}</h3><div class="comment-form"><div><form>' + $form.html() + '</form></div></div></div>');
        $comment.attr('data-has-form', 'true');
      } else {
        $comment.find('.reply-form').remove();
        $comment.attr('data-has-form', 'false');
      }
    });


    $('form .comment-submit').live('click', function () {
      var $form = $(this).closest('form');
      var $comment_form = $('.post-comment');
      generateComment($form, 'comment', $comment_form, function (message) {
        $comment_form.before('<div class="success">' + message + '</div>');
        setTimeout(function () {
          $('.comments .success').fadeOut(400);
        }, 2000);
        $form[0].reset();
      });
    });

    $('form .reply-submit').live('click', function () {
      var $form = $(this).closest('form');
      var $reply_form = $(this).closest('.comment').find('.reply-form');
      generateComment($form, 'reply', $reply_form, function (message) {
        $reply_form.before('<div class="success">' + message + '</div>');
        setTimeout(function () {
          $('.comments .success').fadeOut(400);
        }, 2000);
        $form.closest('.comment').attr('data-has-form', 'false');
        $reply_form.remove();
      });
    });
  </script>
</div>
{{ footer }}
