{{ header }}


{# // Breadcrumbs ------------------------------------------------------ #}

{{ tbSlotStart('product/product.breadcrumbs') }}
<ul class="breadcrumb">
  {% for breadcrumb in breadcrumbs %}
  <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
  {% endfor %}
</ul>
{{ tbSlotStop() }}

{# // Page title ------------------------------------------------------- #}

{{ tbSlotStart('product/product.page_title', {'filter': ['product/product.page_title.filter', 'heading_title']}) }}
<h1>{{ heading_title }}</h1>
{{ tbSlotStop() }}

{# // Product Images --------------------------------------------------- #}

{{ tbSlotStart('product/product.product_images') }}
{% if images or thumb %}
{% set image_preview_width  = tbData['config'].get(tbConfigThemePrefix() ~ '_image_thumb_width')  %}
{% set image_preview_height = tbData['config'].get(tbConfigThemePrefix() ~ '_image_thumb_height') %}
{% set image_full_width     = tbData['config'].get(tbConfigThemePrefix() ~ '_image_popup_width')  %}
{% set image_full_height    = tbData['config'].get(tbConfigThemePrefix() ~ '_image_popup_height') %}
{% set gallery              = tbData['system.product_images'] %}

<style scoped>
{% if images %}
{% if gallery['nav_position'] == 'bottom' or gallery['nav_style'] != 'thumbs' %}
#product_images                 { padding-top: {{ '{{ratio_plus}}' }};   }
#product_images .tb_slides      { margin-top:  {{ '{{ratio_minus}}' }};  }
#product_images .tb_thumbs_wrap { padding-top: {{ '{{ratio_thumbs}}' }}; }
{% else %}
#product_images                 { padding-top: {{ '{{ratio_plus}}' }};   }
{% endif %}
{% else %}
#product_images                 { padding-top: {{ '{{ratio_single}}' }}%; }
#product_images .tb_slides      { margin-top: -{{ '{{ratio_single}}' }}%; }
{% endif %}
</style>

{% if thumb or images %}
<ul class="thumbnails">
  {% if thumb %}
  <li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
  {% endif %}
  {% if images %}
  {% for image in images %}
  <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
  {% endfor %}
  {% endif %}
</ul>
{% endif %}

<div id="product_images" class="tb_gallery{{ '{{gallery_css_classes}}' }}">

  <div class="tb_slides">
    {# // Zoom Area #}
    {% if tbData['system.product_images']['zoom'] %}
    <span class="tb_zoom_box tb_zoom_{{ tbData['system.product_images']['zoom_trigger'] }}"></span>
    {% endif %}

    {# // Fullscreen button #}
    {% if tbData['system.product_images']['fullscreen'] %}
    <a href="javascript:;" class="tb_fullscreen_button btn btn-{{ tbData['system.product_images']['fullscreen_button_size'] }} tb_no_text tbGoFullscreen">
      <i class="tb_icon {{ tbData['system.product_images']['fullscreen_button_icon'] }}" style="font-size: {{ tbData['system.product_images']['fullscreen_button_icon_size'] }}px;"></i>
    </a>
    {% endif %}

    {# // Slides #}
    <div class="frame" data-mightyslider="width: {{ image_preview_width }}, height: {{ image_preview_height }}">
      <div>
        <div data-mightyslider="type: 'image', cover: '{{ tbData.escapeImg(popup) }}', thumbnail: '{{ tbData.escapeImg(thumb) }}'"></div>
        {% for image in images %}
        <div data-mightyslider="type: 'image', cover: '{{ tbData.escapeImg(image['popup']) }}', thumbnail: '{{ tbData.escapeImg(image['thumb']) }}'"></div>
        {% endfor %}
      </div>
    </div>
  </div>

  {% if images and gallery['nav'] and gallery['nav_style'] == 'thumbs' %}
  <div class="tb_thumbs_wrap">
    <div class="tb_thumbs">
      <div class="has_slider">
        <ul class="tb_listing tb_grid_view tb_size_{{ gallery['nav_thumbs_num'] }}"></ul>
      </div>
    </div>
  </div>
  {% endif %}

  {% if images and gallery['nav'] and gallery['nav_style'] != 'thumbs' %}
  <ul class="tb_pagination mSPages">
  </ul>
  {% endif %}

</div>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {

    // Gallery

    window.$slider = new mightySlider(
        '#product_images .frame',
        {
            speed:             500,
            easing:            'easeOutExpo',
            viewport:          'fill',
            autoScale:         1,
            preloadMode:       'instant',
            navigation: {
                slideSize:     '100%',
                keyboardNavBy: 'slides'
            },
            commands: {
                thumbnails:    {{ (gallery['nav'] and gallery['nav_style'] == 'thumbs' and images) ? 1 : 0 }},
                pages:         {{ (gallery['nav'] and gallery['nav_style'] != 'thumbs' and images) ? 1 : 0 }},
                buttons:       {{ (gallery['nav'] and gallery['nav_buttons']) ? 1 : 0 }}
            },
            {% if gallery['nav'] and gallery['nav_style'] != 'thumbs' %}
            pages: {
                pagesBar:      '#product_images .tb_pagination',
                activateOn:    'click'
            },
            {% endif %}
            dragging: {
                swingSync:     5,
                swingSpeed:    0.2
            },
            {% if gallery['nav'] and gallery['nav_style'] == 'thumbs' %}
            thumbnails: {
                thumbnailsBar:     '#product_images .tb_thumbs ul',
                thumbnailsButtons: 0,
                horizontal:        {{ (gallery['nav_position'] == 'bottom') ? 1 : 0 }},
                thumbnailNav:      'centered',
                thumbnailSize:     '{{ 100 / gallery['nav_thumbs_num'] }}%'
            },
            {% endif %}
            classes: {
                loaderClass:   'tb_loading_bar'
            }
        }
    );

    {% if gallery['zoom'] %}
    function zoom_preview() {
        $('#{{ '{{widget_dom_id}}' }} .tb_zoom_box.tb_zoom_click').removeClass('tb_zoomed');
        $('#{{ '{{widget_dom_id}}' }} .tb_zoom_box').trigger('zoom.destroy').zoom({
            url: window.$slider.slides[window.$slider.relative.activeSlide].options.cover,
            on:  '{{ gallery['zoom_trigger'] }}'
        });
    }

    $('#{{ '{{widget_dom_id}}' }} .tb_zoom_box.tb_zoom_click').bind('click', function(){
        if ($(this).hasClass('tb_zoomed')) {
            $(this).removeClass('tb_zoomed');
        } else {
            $(this).addClass('tb_zoomed');
        }
    });

    window.$slider.one('coverLoaded', function (eventName) {
        $('#product_images .tb_thumbs ul').removeClass('tb_grid_view tb_size_1 tb_size_2 tb_size_3 tb_size_4 tb_size_5 tb_size_6 tb_size_7 tb_size_8');
    });

    window.$slider.on('load moveEnd', function (eventName) {
        zoom_preview();
    });
    {% endif %}

    window.$slider.init();
    window.$slider.activatePage(0);

    {% if tbData['system.product_images']['fullscreen'] %}

    // Fullscreen gallery

    var fullscreen_gallery_items = [
        {
            src:  '{{ tbData.escapeImg(popup) }}',
            w:     {{ image_full_width }},
            h:     {{ image_full_height }},
            msrc: '{{ tbData.escapeImg(thumb) }}'
        }
        {% for image in images %}
        ,{
            src:  '{{ tbData.escapeImg(image['popup']) }}',
            w:     {{ image_full_width }},
            h:     {{ image_full_height }},
            msrc: '{{ tbData.escapeImg(image['thumb']) }}'
        }
        {% endfor %}
    ];

    $('{{ '#{{widget_dom_id}}' }} .tbGoFullscreen').bind('click', function() {
        lightbox_gallery('{{ '{{widget_dom_id}}' }}', window.$slider, false, fullscreen_gallery_items);
    });
    {% endif %}

    // Gallery changes detection

    var myInterval = null;

    jQuery('#content').on('change', ':input', function() {
        var callback = function() {

            var gallery,
                new_gallery = false,
                $images_src = $('{{ '#{{widget_dom_id}}' }} .thumbnails');

            fullscreen_gallery_items = [];

            $images_src.find('a').each(function(index) {
                gallery += '<div data-mightyslider="type: \'image\', cover: \'' + $(this).attr('href') + '\', thumbnail: \'' + $(this).find('img').attr('src') + '\'"></div>';

                fullscreen_gallery_items.push({
                    src:  $(this).attr('href'),
                    w:    {{ image_full_width }},
                    h:    {{ image_full_height }},
                    msrc: $(this).find('img').attr('src')
                });

                if ($(this).attr('href') != window.$slider.slides[index].options.cover) {
                    new_gallery = true;
                }
            });

            if ($images_src.find('a').length != window.$slider.slides.length) {
                new_gallery = true;
            }

            if (new_gallery) {
                var slides_num = window.$slider.slides.length;

                window.$slider.off('load');
                for (var i = 0; i < slides_num; i++) {
                    window.$slider.remove('.mSSlide');
                }
                window.$slider.add(gallery);
                window.$slider.on('load', function (eventName) {
                  zoom_preview();
                });
            }

            return new_gallery;
        };

        clearInterval(myInterval);

        if (jQuery.active) {
            $(document).one("ajaxStop.product-images", function() {
                var i = 0;

                myInterval = setInterval(function () {
                    if (callback() || i == 5) {
                        clearInterval(myInterval);
                    }
                    i++;
                }, 150);
            });
        } else {
            setTimeout(function() {
                callback();
            }, 100);
        }
    });

});
</script>
{% endif %}
{{ tbSlotStop() }}


{# // Product Info ----------------------------------------------------- #}

{% set product_info = [] %}
{{ tbSlotStart('product/product.product_info', {'filter': ['product/product.product_info.filter', 'button_cart', 'product_info']}) }}

{% set content_top = '' %}{% set content_bottom = '' %}

{{ content_top }}

<dl class="dl-horizontal">
  <dt>{{ text_stock }}</dt>
  <dd><span class="tb_stock_status_{{ product_info['stock_status_id'] }}">{{ stock }}</span></dd>
  <dt>{{ text_model }}</dt>
  <dd>{{ model }}</dd>
  {% if reward %}
  <dt>{{ text_reward }}</dt>
  <dd>{{ reward }}</dd>
  {% endif %}
  {% if tbData.common['manufacturers_enabled'] and manufacturer %}
  <dt>{{ text_manufacturer }}</dt>
  <dd><a href="{{ manufacturers }}">{{ manufacturer }}</a></dd>
  {% endif %}
</dl>

{{ content_bottom }}

{{ tbSlotStop() }}
{# {% if product_info.price_num <= 0 %}{% set price = false %}{% endif %} #}

{# // Product Price ---------------------------------------------------- #}

{{ tbSlotStart('product/product.product_price') }}
{% if price and tbData.common['hide_zero_price'] %}
{% if tbData['system.product_price']['show_label'] %}
<span class="tb_label">{{ tbData.text_price }}</span>
{% endif %}

<div class="price">
  {% set price = tbData.priceFormat(price) %}
  {% if not special %}
  <span class="price-regular">{{ tax }}</span>
  {% else %}
  {% set special = tbData.priceFormat(special) %}
  <span class="price-old">{{ price }}</span>
  {% if tbData['system.product_price']['old_price_new_line'] %}
  <span class="clear"></span>
  {% endif %}
  <span class="price-new">{{ special }}</span>
  {% endif %}
</div>

{% if not tbData['system.product_price']['show_tax'] %}{% set tax = false %}{% endif %}
{% if tax and not special %}
<span class="price-tax">{{ text_tax }} <span>{{ price }}</span></span>
{% elseif tax and special %}
<span class="price-tax">{{ text_tax }} <span>{{ special }}</span></span>
{% endif %}

{% if not tbData['system.product_price']['show_reward'] %}{% set points = false %}{% endif %}
{% if points %}
<span class="reward">{{ text_points }} {{ points }}</span>
{% endif %}

{% if tbData.product_savings and tbData['system.product_price']['show_savings'] %}
<p class="price-savings">
{% if tbData['system.product_price']['show_savings_sum'] %}
{{ tbData.product_you_save }}
{% else %}
{{ tbData.product_savings }}
{% endif %}
</p>
{% endif %}

{% if not tbData.config.get('config_customer_price') or (tbData.config.get('config_customer_price') and tbData.customer.isLogged()) %}
<script type="text/javascript">
$(document).ready(function() {
    var change_interval;

    $('#content').find('select[name="profile_id"], :input[name^="option"], :input[name^="quantity"]').change(function(){
        clearTimeout(change_interval);

        change_interval = setTimeout(function(){
            $.ajax({
                type: 'post',
                url: 'index.php?route=tb/getProductPrice',
                dataType: 'json',
                data: $('#content :checked, #content select, #content :input[name^="quantity"], #content :input[name^="product_id"]'),
                success: function (data) {
                    if (typeof data.error != "undefined") {
                        return;
                    }

                    var $priceWrap = $('.tb_wt_product_price_system');

                    if (!$priceWrap.find('.tb_integer')) {
                        return;
                    }

                    if ($priceWrap.has('.price-old').length) {
                        $priceWrap.find('.price-old').html(data.price);
                        $priceWrap.find('.price-new').html(data.subtotal);
                        $priceWrap.find('.price-savings strong').text(data.savings_sum);
                        $priceWrap.find(".price-tax span").html(data.special);
                    } else {
                        $priceWrap.find('.price-regular').html(data.subtotal);
                        $priceWrap.find(".price-tax span").html(data.price);
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }, 300);
    }).trigger('change');
});
</script>
{% endif %}
{% endif %}
{{ tbSlotStop() }}

{# // Product Discounts ------------------------------------------------ #}

{{ tbSlotStart('product/product.product_discounts') }}
{% if price %}
{% if discounts %}
{% if tbData['system.product_discounts']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tbData.text_product_discount }}</h2>
</div>
{% endif %}
<div class="panel-body">
  <table{{ '{{table_classes}}' }}>
    <thead>
      <tr>
        <th>{{ tbData.text_product_order_quantity }}</th>
        <th>{{ tbData.text_product_price_per_item }}</th>
      </tr>
    </thead>
    <tbody>
      {% for discount in discounts %}
      {% set discountprice = discount.price|striptags %}
      {% set fullprice = price|striptags %}
      {% set pricenopound = fullprice|trim('£') %}
      {% set discountnopound = discountprice|trim('£') %}
      {% set discountamount = ((pricenopound - discountnopound)/6)*5 %}
      <tr>
        <td>{{ tbData.text_product_discount_items|format(discount.quantity) }}</td>
        <td>{{ discountamount|number_format(2) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endif %}
{{ tbSlotStop() }}

{# // Product Options -------------------------------------------------- #}

{{ tbSlotStart('product/product.product_options') }}
{% if options or recurrings %}
{% if tbData['system.product_options']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ text_option }}</h2>
</div>
{% endif %}

{{ tbSlotFilter('product/product_options.filter', 'options') }}
{% if options %}
<div class="options panel-body form-horizontal">

  {% for option in options %}

  {# // SELECT #}
  {% if option.type == 'select' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-9">
      <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
        <option value="">{{ text_select }}</option>
        {% for option_value in option.product_option_value %}
        <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
          {% if option_value.price %}
          ({{ option_value.price_prefix }}{{ option_value.price }})
          {% endif %} </option>
        {% endfor %}
      </select>
    </div>
  </div>
  {% endif %}

  {# // RADIO #}
  {% if option.type == 'radio' %}
  <div class="form-group{% if option.required %} required {% endif %}{% if option.tb_css_classes is not empty %}{{ ' tb_' ~ option.tb_css_classes }}{% endif %}">
    {% if option.tb_css_classes is not empty and option.tb_css_classes == 'style_2' and (option.image_width is not empty or option.image_height is not empty) %}
    <style scoped>
    #input-option{{ option.product_option_id }} img {
      {% if option.image_width is not empty %}
      width: {{ option.image_width }}px !important;
      {% endif %}
      {% if option.image_width is empty and option.image_height is not empty %}
      width: auto !important;
      {% endif %}
      {% if option.image_height is not empty %}
      height: {{ option.image_height }}px !important;
      {% endif %}
    }
    </style>
    {% endif %}
    <label class="control-label">{{ option.name }}</label>
    <div class="col-sm-9">
      <div id="input-option{{ option.product_option_id }}">  {% for option_value in option.product_option_value %}
        <div class="radio{% if option_value.image is not empty %} image{% endif %}">
          <label{% if option.tb_css_classes is not empty and option.tb_css_classes == 'style_2' %} class="tb_bg_str_2 tb_bg_hover_str_3"{% endif %}{% if option_value.price %} title="{{ option_value.price_prefix }}{{ option_value.price }}"{% endif %}>
            <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
            {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
            <span>
              {{ option_value.name }}
              {% if option_value.price %}<span>
              ({{ option_value.price_prefix }}{{ option_value.price }})
              </span>{% endif %}
            </span>
          </label>
        </div>
        {% endfor %} </div>
    </div>
  </div>
  {% endif %}

  {# // CHECKBOX #}
  {% if option.type == 'checkbox' %}
  <div class="form-group{% if option.required %} required {% endif %}{% if option.tb_css_classes is not empty %}{{ ' tb_' ~ option.tb_css_classes }}{% endif %}">
    {% if option.tb_css_classes is not empty and option.tb_css_classes == 'style_2' and (option.image_width is not empty or option.image_height is not empty) %}
    <style scoped>
    #input-option{{ option.product_option_id }} img {
      {% if option.image_width is not empty %}
      width: {{ option.image_width }}px !important;
      {% endif %}
      {% if option.image_width is empty and option.image_height is not empty %}
      width: auto !important;
      {% endif %}
      {% if option.image_height is not empty %}
      height: {{ option.image_height }}px !important;
      {% endif %}
    }
    </style>
    {% endif %}
    <label class="control-label">{{ option.name }}</label>
    <div class="col-sm-9">
      <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
        <div class="checkbox{% if option_value.image is not empty %} image{% endif %}">
          <label{% if option.tb_css_classes is not empty and option.tb_css_classes == 'style_2' %} class="tb_bg_str_2 tb_bg_hover_str_3"{% endif %}{% if option_value.price %} title="{{ option_value.price_prefix }}{{ option_value.price }}"{% endif %}>
            <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
            {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
            <span>
              {{ option_value.name }}
              {% if option_value.price %}<span>
              ({{ option_value.price_prefix }}{{ option_value.price }})
              </span>{% endif %}
            </span>
          </label>
        </div>
        {% endfor %} </div>
    </div>
  </div>
  {% endif %}

  {# // TEXT #}
  {% if option.type == 'text' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-9">
      <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
    </div>
  </div>
  {% endif %}

  {# // TEXTAREA #}
  {% if option.type == 'textarea' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-10">
      <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
    </div>
  </div>
  {% endif %}

  {# // FILE #}
  {% if option.type == 'file' %}
  {% set hasFile = true %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label">{{ option.name }}</label>
    <div class="col-sm-9">
      <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn"><i class="fa fa-upload"></i> {{ button_upload }}</button>
      <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
    </div>
  </div>
  {% endif %}

  {# // DATE #}
  {% if option.type == 'date' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-10">
      <div class="input-group date">
        <input type="text" name="option[{{ option.product_option_id }}]" valtb_zoom_box tb_zoom_clickue="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
        <span class="input-group-btn">
          <button class="btn btn-default tb_no_text" type="button"><i class="fa fa-calendar"></i></button>
        </span></div>
    </div>
  </div>
  {% endif %}

  {# // DATETIME #}
  {% if option.type == 'datetime' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-9">
      <div class="input-group datetime">
        <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default tb_no_text"><i class="fa fa-calendar"></i></button>
        </span></div>
    </div>
  </div>
  {% endif %}

  {# // TIME #}
  {% if option.type == 'time' %}
  <div class="form-group{% if option.required %} required {% endif %}">
    <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
    <div class="col-sm-9">
      <div class="input-group time">
        <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default tb_no_text"><i class="fa fa-calendar"></i></button>
        </span></div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
  {% endif %}

  {# // RECURRING #}

  {% if recurrings %}
  <div class="form-group required">
    <label>{{ text_payment_recurring }}</label>
    <div class="col-sm-10">
      <select name="recurring_id" class="form-control">
        <option value="">{{ text_select }}</option>
        {% for recurring in recurrings %}
        <option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
        {% endfor %}
      </select>
      <div class="help-block" id="recurring-description"></div>
    </div>
  </div>
  {% endif %}

</div>

<script>

// Datetimepicker

$('.date').datetimepicker({
	language: '{{ datepicker }}',
  pickTime: false
});
$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
  pickDate: true,
  pickTime: true,
  icons: {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up:   'fa fa-angle-up',
    down: 'fa fa-angle-down'
  }
});
$('.time').datetimepicker({
	language: '{{ datepicker }}',
  pickDate: false,
  icons: {
    up:   'fa fa-angle-up',
    down: 'fa fa-angle-down'
  }
});

// Option select

$('.options .tb_style_2 .radio').bind('click', function() {
    $(this).closest('.form-group').find('.tb_checked').removeClass('tb_checked tb_main_color_bg').addClass('tb_bg_hover_str_3');
    $(this).find('> label').removeClass('tb_bg_hover_str_3').addClass('tb_checked tb_main_color_bg');
});
$('.options .tb_style_2 .checkbox').bind('click', function(e) {
  $(this).find('> label').toggleClass('tb_checked tb_main_color_bg', $(this).find('input[type="checkbox"]').prop("checked"));
});

// File upload

$('button[id^=\'button-upload\']').on('click', function() {
  var node = this;

  $('#form-upload').remove();

  $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

  $('#form-upload input[name=\'file\']').trigger('click');

  if (typeof timer != 'undefined') {
    clearInterval(timer);
  }

  timer = setInterval(function() {
    if ($('#form-upload input[name=\'file\']').val() != '') {
      clearInterval(timer);

      $.ajax({
        url: 'index.php?route=tool/upload',
        type: 'post',
        dataType: 'json',
        data: new FormData($('#form-upload')[0]),
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
					  $(node).button('loading');
				},
				complete: function() {
					  $(node).button('reset');
        },
        success: function(json) {
          $('.text-danger').remove();

          if (json['error']) {
            $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
          }

          if (json['success']) {
            alert(json['success']);

						$(node).parent().find('input').val(json['code']);
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  }, 500);
});

// Reccuring

$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
  $.ajax({
    url: 'index.php?route=product/product/getRecurringDescription',
    type: 'post',
    data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
    dataType: 'json',
    beforeSend: function() {
      $('#recurring-description').html('');
    },
    success: function(json) {
      $('.alert, .text-danger').remove();

      if (json['success']) {
        $('#recurring-description').html(json['success']);
      }
    }
  });
});
</script>
{% endif %}
{{ tbSlotStop() }}

{# // Product Buy ----------------------------------------------------- #}

{{ tbSlotStart('product/product.product_buy') }}
{% if (price and button_cart) or tbData.common['wishlist_enabled'] or tbData.common['compare_enabled'] %}
<div id="product"></div>
<div class="tb_cart_wrap">
  {% if price and button_cart %}
  <div class="tb_purchase_button">
    <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
    <div class="tb_input_wrap">
      <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" data-min="{{ minimum }}" />
      <input type="hidden" name="product_id" value="{{ product_id }}" />
    </div>
    <br />
    <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn">{{ button_cart }}</button>
  </div>
  {% endif %}
  <div class="tb_actions">
    {% if tbData.common['wishlist_enabled'] %}
    <div class="tb_button_wishlist">
      <a class="tb_icon_10 fa-heart" href="javascript:;" onclick="wishlist.add('{{ product_id }}');">{{ button_wishlist }}</a>
    </div>
    {% endif %}
    {% if tbData.common['compare_enabled'] %}
    <div class="tb_button_compare">
      <a class="tb_icon_10 fa-retweet" href="javascript:;" onclick="compare.add('{{ product_id }}');">{{ button_compare }}</a>
    </div>
    {% endif %}
  </div>
</div>
{% if minimum > 1 %}
<div class="minimum">{{ text_minimum }}</div>
{% endif %}

<script type="text/javascript">
tbApp.onScriptLoaded(function() {
    $('#input-quantity').TouchSpin({
        max: 1000000000,
        verticalbuttons: true,
        verticalupclass: 'fa fa-caret-up',
        verticaldownclass: 'fa fa-caret-down'
    });
});

$('#button-cart').on('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('.product-info input[type=\'text\'], .product-info input[type=\'number\'], .product-info input[type=\'date\'], .product-info input[type=\'datetime\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-cart').button('loading');
        },
        complete: function() {
            $('#button-cart').button('reset');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            if (json['error']) {
                var errors = '';

                if (json['error']['option']) {
                    for (i in json['error']['option']) {
                        var element = $('#input-option' + i.replace('_', '-'));

                        element.closest('.form-group').find('> label + div').append('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
                if (json['error']['recurring']) {
					          $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                }

                // Highlight any found errors
                $('.text-danger').each(function() {
                    $(this).closest('.form-group').addClass('has-error');
                });
                // Popup any found errors
                // displayNotice('product', 'failure', 'product', errors);
            }
            if (json['success']) {
                $.get('index.php?route=common/cart/info', function(result) {
                    var $container = $(tbRootWindow.document).find('.tb_wt_header_cart_menu_system');

                    $container.find('.heading').replaceWith($(result).find('.heading').clone());
                    $container.find('.content').replaceWith($(result).find('.content').clone());

                    tbApp.triggerResizeCallbacks();
                });

                displayNotice('product', 'success', {{ product_id }}, json['success']);
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
</script>
{% endif %}
{{ tbSlotStop() }}

{# // Special price counter ------------------------------------------- #}

{{ tbSlotStart('product/product.special_price_counter') }}
{% if product_info.special_date_end is not empty %}
<div class="tb_counter tb_style_1">
  <span class="tb_counter_label h4">{{ tbData.text_offer_ending }}</span>
  <span class="tb_counter_time" data-special-price-end-date="{{ (product_info.special_date_end|date('U'))|date('Y/m/d') }}">
    {% set total_seconds = product.special_date_end|date('U') - 'now'|date('U') %}
    {% set days    =    (total_seconds / 86400)|round(0, 'floor') %}
    {% set hours   =   ((total_seconds % 86400) / 3600)|round(0, 'floor') %}
    {% set minutes =  (((total_seconds % 86400) % 3600) / 60)|round(0, 'floor') %}
    {% set seconds =  (((total_seconds % 86400) % 3600) % 60)|round(0, 'floor') %}
    <span class="tb_counter_days">{{ days }}</span>
    <span class="tb_counter_hours">{{ hours }}</span>
    <span class="tb_counter_minutes">{{ minutes }}</span>
    <span class="tb_counter_seconds">{{ seconds }}</span>
  </span>
</div>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {
  create_countdown('#{{ '{{widget_dom_id}}' }}','{{ 'now'|date('D M d Y H:i:s O') }}', '{{ 'now'|date('Z') / 3600 - 'now'|date('I') }}');
});
</script>
{% endif %}
{{ tbSlotStop() }}

{# // Product Reviews Summary ----------------------------------------- #}

{{ tbSlotStart('product/product.product_reviews_summary') }}
{% if review_status %}
{% if rating %}
<div class="rating responsive" data-sizes="320,0">
  <div class="tb_bar">
    <span class="tb_percent" style="width: {{ rating * 20 }}%;"></span>
    <span class="tb_base"></span>
  </div>
  <span class="tb_average">{{ rating }}/5</span>
  <span class="tb_total">({{ reviews }})</span>
  <a class="tb_review_write tb_main_color border-color" data-toggle="modal" data-target="#tbReviewFormWrap">
    <span class="tb_icon fa-pencil"></span>{{ text_write }}
  </a>
</div>
{% else %}
<div class="rating responsive" data-sizes="320,0">
  <div class="tb_bar">
    <span class="tb_base"></span>
  </div>
  <span class="tb_total">{{ tbData.text_product_not_yet_rated }}</span>
  <a class="tb_review_write tb_main_color border-color" data-toggle="modal" data-target="#tbReviewFormWrap">
    <span class="tb_icon fa-pencil"></span>{{ text_write }}
  </a>
</div>
{% endif %}
{% endif %}
{{ tbSlotStop() }}

{# // Product Share --------------------------------------------------- #}

{{ tbSlotStart('product/product.product_share') }}
{% if tbData['system.product_share']['button_facebook']
       or tbData['system.product_share']['button_twitter']
       or tbData['system.product_share']['button_google']
       or tbData['system.product_share']['button_pinterest']
       or tbData['system.product_share']['button_stumbleupon']
       or tbData['system.product_share']['button_linkedin']
       or tbData['system.product_share']['button_custom'] %}
{% if tbData['system.product_share']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tbData.text_product_share }}</h2>
</div>
{% endif %}
{% if not tbData['system.product_share']['button_custom'] %}
<div class="panel-body tb_share_box">
  {% if tbData['system.product_share']['button_facebook'] %}
  <div class="tb_facebook">
    <a class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="{% if tbData['system.product_share']['button_facebook_share'] is not empty %}true{% else %}false{% endif %}"></a>
  </div>
  {% endif %}
  {% if tbData['system.product_share']['button_twitter'] %}
  <div class="tb_twitter">
    <a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>
  </div>
  {% endif %}
  {% if tbData['system.product_share']['button_google'] %}
  <div class="tb_gplus" style="width: 57px;">
    <a class="g-plusone" data-size="medium"></a>
  </div>
  {% endif %}
  {% if tbData['system.product_share']['button_pinterest'] %}
  <div class="tb_pinterest">
    <a href="//www.pinterest.com/pin/create/button/?url={{ tbData.current_url }}&media={{ thumb }}" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
  </div>
  {% endif %}
  {% if tbData['system.product_share']['button_stumbleupon'] %}
  <div class="tb_stumbleupon">
    <su:badge layout="1"></su:badge>
  </div>
  {% endif %}
  {% if tbData['system.product_share']['button_linkedin'] %}
  <div class="tb_social_button tb_linkedin">
    <script src="//platform.linkedin.com/in.js" type="text/javascript">lang: {% if tbData.facebook['locale'] %}{{ tbData.facebook['locale'] }}{% else %}en_EN{% endif %}</script>
    <script type="IN/Share" data-url="{{ tbData.current_url }}" data-counter="right"></script>
  </div>
  {% endif %}
</div>
<script>
tbApp.onScriptLoaded(function() {

    {# // Tweet button #}
    {% if tbData['system.product_share']['button_twitter'] %}
    var loadTwitter = function () {
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    };
    {% endif %}

    {# // Google +1 #}
    {% if tbData['system.product_share']['button_google'] %}
    var loadGplus = function () {
        (function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/platform.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
    };
    {% endif %}

    {# // Pinterest button #}
    {% if tbData['system.product_share']['button_pinterest'] %}
    var loadPinterest = function () {
        (function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='//assets.pinterest.com/js/pinit.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
    };
    {% endif %}

    {# // Stumble Upon #}
    {% if tbData['system.product_share']['button_stumbleupon'] %}
    var loadSU = function () {
        (function(){var li=document.createElement('script');li.type='text/javascript';li.async=true;li.src=('https:'==document.location.protocol?'https:':'http:')+'//platform.stumbleupon.com/1/widgets.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li,s);})();
    };
    {% endif %}

    {% if tbData.system['js_lazyload'] %}
    $(document).on('lazybeforeunveil', function(e) {
        if ($(e.target).filter('#{{ '{{widget_dom_id}}' }}').length) {

            {# // Facebook like #}
            {% if tbData['system.product_share']['button_facebook'] %}
            var parseFBXML = function() {
                FB.XFBML.parse(document.getElementById('{{widget_dom_id}}'));
            };
            if (window.FB_XFBML_parsed === undefined) {
                window.FB_XFBML_parsed = parseFBXML;
            } else {
                parseFBXML();
            }
            {% endif %}

            {# // Tweet button #}
            {% if tbData['system.product_share']['button_twitter'] %}
            loadTwitter();
            {% endif %}

            {# // Google +1 #}
            {% if tbData['system.product_share']['button_google'] %}
            loadGplus();
            {% endif %}

            {# // Pinterest button #}
            {% if tbData['system.product_share']['button_pinterest'] %}
            loadPinterest();
            {% endif %}

            {# // Stumble Upon #}
            {% if tbData['system.product_share']['button_stumbleupon'] %}
            loadSU();
            {% endif %}
        }
    });
    {% else %}

    {# // Tweet button #}
    {% if tbData['system.product_share']['button_twitter'] %}
    loadTwitter();
    {% endif %}

    {# // Google +1 #}
    {% if tbData['system.product_share']['button_google'] %}
    loadGplus();
    {% endif %}

    {# // Pinterest button #}
    {% if tbData['system.product_share']['button_pinterest'] %}
    loadPinterest();
    {% endif %}

    {# // Stumble Upon #}
    {% if tbData['system.product_share']['button_stumbleupon'] %}
    loadSU();
    {% endif %}

    {% endif %}
});
</script>
{% else %}
<div class="tb_share_box_custom">
  {{ tbData['system.product_share']['button_custom'] }}
</div>
{% endif %}
{% endif %}
{{ tbSlotStop() }}


{# // Product Description --------------------------------------------- #}

{{ tbSlotStart('product/product.product_description') }}
{% if tbData['system.product_description']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tab_description }}</h2>
</div>
{% endif %}
<div class="panel-body tb_product_description tb_text_wrap">
  {{ description }}
</div>

{# // Rich Snippets --------------------------------------------------- #}

{% if tbData['seo_settings']['google_microdata'] is not defined or tbData['seo_settings']['google_microdata'] is not empty %}
<script type="application/ld+json">
{
  "@context":         "http://schema.org/",
  "@type":            "Product",
  "name":             "{{ heading_title }}",
  "image":            "{{ thumb }}",
  "description":      "{{ description|striptags|slice(0, 200) }}",
  {% if tbData.common['manufacturers_enabled'] and manufacturer %}
  "brand":{
    "@type":          "Thing",
    "name":           "{{ manufacturer }}"
  },
  {% endif %}
  {% if rating %}
  "aggregateRating":{
    "@type":          "AggregateRating",
    "ratingValue":    "{{ rating }}",
    "reviewCount":    "{{ reviews|number_format }}"
  },
  {% endif %}
  "offers":{
    "@type":          "Offer",
    "priceCurrency":  "{{ tbData.currency_code }}",
    {% if not special %}
    "price":          "{{ product_info.price_num }}",
    {% else %}
    "price":          "{{ product_info.special_num }}",
    {% endif %}
    "availability":   "{{ stock|striptags }}",
    "seller":{
      "@type":        "Organization",
      "name":         "{{ product_info['store_name'] }}"
    }
  }
}
</script>
{% endif %}
{{ tbSlotStop() }}


{# // Product Attributes ---------------------------------------------- #}

{{ tbSlotStart('product/product.product_attributes') }}
{% if attribute_groups %}
{% if tbData['system.product_attributes']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tab_attribute }}</h2>
</div>
{% endif %}
<div class="panel-body tb_product_attributes">
  <table class="table">
    {% for attribute_group in attribute_groups %}
    <thead>
      <tr>
        <th colspan="2">{{ attribute_group['name'] }}</th>
      </tr>
    </thead>
    <tbody>
      {% for attribute in attribute_group.attribute %}
      <tr>
        <td width="30%">{{ attribute['name'] }}</td>
        <td>{{ attribute['text'] }}</td>
      </tr>
      {% endfor %}
    </tbody>
    {% endfor %}
  </table>
</div>
{% endif %}
{{ tbSlotStop() }}


{# // Product Reviews ------------------------------------------------- #}

{{ tbSlotStart('product/product.product_reviews') }}
{% if review_status %}
{% if tbData['system.product_reviews']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tab_review }}</h2>
</div>
{% endif %}
<div class="panel-body tb_product_reviews">
  <div id="review"></div>
  <a class="btn" data-toggle="modal" data-target="#tbReviewFormWrap">{{ text_write }}</a>
  <div id="tbReviewFormWrap" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">{{ text_write }}</h2>
          <a class="close" href="javascript:;" data-dismiss="modal">
            <svg><use xlink:href="{{ tbData.current_url }}#close" /></svg>
          </a>
        </div>
        <div class="modal-body">
          {% if review_guest %}
          <form class="tbReviewForm form-vertical">
            <div class="form-group required">
              <label class="control-label" for="input-name">{{ entry_name }}</label>
              <div class="col-sm-12">
                <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
              </div>
            </div>
            <div class="form-group required">
              <label class="control-label" for="input-review">{{ entry_review }}</label>
              <div class="col-sm-12 tb_full">
                <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                <div class="help-block">{{ text_note }}</div>
              </div>
            </div>
            <div class="form-group required">
              <label class="control-label">{{ entry_rating }}</label>
              <div class="col-sm-12">
                {{ entry_bad }}&nbsp;&nbsp;&nbsp;
                <input type="radio" name="rating" value="1" />
                &nbsp;
                <input type="radio" name="rating" value="2" />
                &nbsp;
                <input type="radio" name="rating" value="3" />
                &nbsp;
                <input type="radio" name="rating" value="4" />
                &nbsp;
                <input type="radio" name="rating" value="5" />
                &nbsp;{{ entry_good }}</div>
            </div>
            {{ captcha }}
            <span class="clear tb_sep"></span>
            <div class="buttons clearfix">
              <div class="pull-right">
                <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
              </div>
            </div>
          </form>
          {% else %}
          <p class="tb_text_wrap tb_empty">{{ text_login }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {
    var closeDialogTimeout;

    $('#review').delegate('.pagination a', 'click', function(e) {
      e.preventDefault();
      $('#review').fadeOut('slow');

      $('#review').load(this.href);

      $('#review').fadeIn('slow');

    });

    $('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');

    $('#tbReviewFormWrap').detach().appendTo('body');

    $('.tbReviewForm .buttons .btn').bind('click', function() {
        $.ajax({
            url: 'index.php?route=product/product/write&product_id={{ product_id }}',
            type: 'post',
            dataType: 'json',
            data: $(".tbReviewForm").serialize(),
            beforeSend: function() {
                $('.tbReviewForm').addClass('tb_blocked tb_loading');
                $('.tbReviewForm').prepend('<i class="fa fa-circle-o-notch fa-spin"></i>');
                $('.tbReviewForm .buttons .tb_button').attr('disabled', true);
            },
            complete: function() {
                $('#captcha').attr('src', 'index.php?route=tool/captcha#'+new Date().getTime());
                $('input[name=\'captcha\']').val('');
            },
            success: function(json) {
                $('.tbReviewForm .alert').remove();
                $('.tbReviewForm').find('> .fa-spin').remove();
                $('.tbReviewForm').removeClass('tb_blocked tb_loading');
                $('.tbReviewForm .tb_submit .tb_button').attr('disabled', false);

                if (json['error']) {
                    $('.tbReviewForm').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                }

                if (json['success']) {
                    $('.tbReviewForm').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
                    $('.tbReviewForm').hide();

                    $('input[name=\'name\']').val('');
                    $('textarea[name=\'text\']').val('');
                    $('input[name=\'rating\']:checked').prop('checked', false);
                    $('#captcha').attr('src', 'index.php?route=tool/captcha#'+new Date().getTime());
                    $('input[name=\'captcha\']').val('');
                    if (typeof grecaptcha != 'undefined' && grecaptcha.reset !== undefined) {
                        grecaptcha.reset();
                    }

                    closeDialogTimeout = setTimeout(function(){
                        $("#tbReviewFormWrap").modal('hide');
                    }, 4000);

                }
            }
        });
    });

    $("#tbReviewFormWrap").on('hidden.bs.modal', function() {
        window.$slider.options.navigation.keyboardNavBy = 'slides';

        $('#tbReviewFormWrap .alert').remove();
        $('.tbReviewForm').show();
        clearTimeout(closeDialogTimeout);
    });

    $("#tbReviewFormWrap").on('shown.bs.modal', function() {
        window.$slider.options.navigation.keyboardNavBy = false;
    });
});
</script>
{% endif %}
{{ tbSlotStop() }}


{# // Related Products ------------------------------------------------ #}

{% if tbSlotStartSystem('product/product.related_products', {'filter': ['product/product.related_products.filter', 'products']}, true) %}
{% set product_settings_context = tbData['products_related'] %}{{ tbExtract(product_settings_context) }}
{% if products  %}
{% if tbData['system.related_products']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ tbData.text_product_tab_related }}</h2>
</div>
{% endif %}
<div class="panel-body">
  <div class="tb_products tb_listing {{ listing_classes }}">
    {% set has_counter = true %}
    {% for product in products %}
    {{ tbSlotStart('products_listing.product', {'product': product, 'product_settings_context': product_settings_context}) }}
    <div class="product-layout">
      <input class="product-id_{{ product.product_id }}" type="hidden" value="" />
            <div class="product-thumb">
        {% if product.thumb and show_thumb %}{{ tbSlotStart('products_listing.product.thumb') }}
        <div class="image">
          <a href="{{ product.href }}">
            <span style="max-width: {{ product.thumb_width }}px;">
              <span style="padding-top: {{ (product.thumb_height / product.thumb_width)|round(4) * 100 }}%;">
                <img src="{{ product.thumb }}"
                     {% if tbData.system['image_lazyload'] %}
                     data-src="{{ product.thumb_original }}"
                     class="lazyload"
                     {% endif %}
                     width="{{ product.thumb_width }}"
                     height="{{ product.thumb_height }}"
                     alt="{{ product.name }}"
                     style="margin-top: -{{ (product.thumb_height / product.thumb_width)|round(4) * 100 }}%;"
                />
              </span>
            </span>
          </a>
        </div>
        {% if product.thumb_hover %}
        <div class="image_hover"><a href="{{ product.href }}"><img src="{{ tbData.theme_catalog_image_url }}pixel.gif" data-src="{{ product.thumb_hover }}" width="{{ product.thumb_width }}" height="{{ product.thumb_height }}" alt="{{ product.name }}" /></a></div>
        {% endif %}
        {{ tbSlotCaptureReturn() }}{% endif %}
        <div>
          <div class="caption">
            {% if show_title %}{{ tbSlotStart('products_listing.product.title') }}
            <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
            {{ tbSlotCaptureReturn() }}{% endif %}
            {% if product.description %}{{ tbSlotStart('products_listing.product.description') }}
            <div class="description">{{ product.description }}</div>
            {{ tbSlotCaptureReturn() }}{% endif %}
            {% if product.price %}
            {{ tbSlotStart('products_listing.product.price') }}
            <p class="price">
              {% if not product.special %}
              <span class="price-regular">{{ product.price }}</span>
              {% else %}
              <span class="price-old">{{ product.price }}</span> <span class="price-new">{{ product.special }}</span>
              {% endif %}
            </p>
            {{ tbSlotCaptureReturn() }}
            {% if product.tax %}
            {{ tbSlotStart('products_listing.product.tax') }}
            <span class="price-tax"><span>{{ text_tax }}</span> {{ product.tax }}</span>
            {{ tbSlotCaptureReturn() }}
            {% endif %}
            {% endif %}
            {% if product.special and product.special_date_end %}
            {{ tbSlotStart('products_listing.product.special_price_end') }}
            {% set has_counter = true %}
            <p class="tb_counter tb_style_1">
              <span class="tb_counter_label h4">{{ tbData.text_offer_ending }}</span>
              <span class="tb_counter_time" data-special-price-end-date="{{ (product.special_date_end|date('U'))|date('Y/m/d') }}">
                {% set total_seconds = product.special_date_end|date('U') - 'now'|date('U') %}
                {% set days    =    (total_seconds / 86400)|round(0, 'floor') %}
                {% set hours   =   ((total_seconds % 86400) / 3600)|round(0, 'floor') %}
                {% set minutes =  (((total_seconds % 86400) % 3600) / 60)|round(0, 'floor') %}
                {% set seconds =  (((total_seconds % 86400) % 3600) % 60)|round(0, 'floor') %}
                <span class="tb_counter_days">{{ days }}</span>
                <span class="tb_counter_hours">{{ hours }}</span>
                <span class="tb_counter_minutes">{{ minutes }}</span>
                <span class="tb_counter_seconds">{{ seconds }}</span>
              </span>
            </p>
            {{ tbSlotCaptureReturn() }}
            {% endif %}
            {{ tbSlotStart('products_listing.product.rating') }}
            {% if product.rating %}
            <div class="rating">
              <div class="tb_bar">
                <span class="tb_percent" style="width: {{ product.rating * 20 }}%;"></span>
                <span class="tb_base"></span>
              </div>
              <span class="tb_average">{{ product.rating }}/5</span>
            </div>
            {% elseif tbData.common['show_empty_rating'] %}
            <div class="rating">
              <div class="tb_bar">
                <span class="tb_percent" style="width: 0%;"></span>
                <span class="tb_base"></span>
              </div>
            </div>
            {% endif %}
            {{ tbSlotCaptureReturn() }}
          </div>
          {% if product.show_cart or show_wishlist or show_compare %}
          <div class="button-group">
            {% if product.show_cart %}{{ tbSlotStart('products_listing.product.button_cart') }}
            <div class="tb_button_add_to_cart{{ cart_button_position_classes }}"{{ cart_button_offset_attr }}>
              <a class="{{ cart_button_classes }}" href="javascript:;" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');">
                <span data-tooltip="{{ product.text_button_cart }}">{{ product.text_button_cart }}</span>
              </a>
            </div>
            {{ tbSlotCaptureReturn() }}{% endif %}
            {% if show_wishlist %}{{ tbSlotStart('products_listing.product.button_wishlist') }}
            <div class="tb_button_wishlist{{ wishlist_button_position_classes }}"{{ wishlist_button_offset_attr }}>
              <a class="{{ wishlist_button_classes }}" href="javascript:;" onclick="wishlist.add('{{ product.product_id }}');">
                <span data-tooltip="{{ tbData.text_wishlist }}">{{ tbData.text_wishlist }}</span>
              </a>
            </div>
            {{ tbSlotCaptureReturn() }}{% endif %}
            {% if show_compare %}{{ tbSlotStart('products_listing.product.button_compare') }}
            <div class="tb_button_compare{{ compare_button_position_classes }}"{{ compare_button_offset_attr }}>
              <a class="{{ compare_button_classes }}" href="javascript:;" onclick="compare.add('{{ product.product_id }}');">
                <span data-tooltip="{{ tbData.text_compare }}">{{ tbData.text_compare }}</span>
              </a>
            </div>
            {{ tbSlotCaptureReturn() }}{% endif %}
            {% if show_quickview %}{{ tbSlotStart('products_listing.product.button_quickview') }}
            <div class="tb_button_quickview{{ quickview_button_position_classes }}"{{ quickview_button_offset_attr }}>
              <a class="{{ quickview_button_classes }}" href="javascript:;" onclick="tbQuickView('{{ product.product_id }}');">
                <span data-tooltip="{{ tbData.text_quickview }}">{{ tbData.text_quickview }}</span>
              </a>
            </div>
            {{ tbSlotCaptureReturn() }}{% endif %}
          </div>
          {% endif %}
          {% if product['show_stock'] %}{{ tbSlotStart('products_listing.product.stock_status') }}
          <p class="tb_label_stock_status tb_label_stock_status_{{ product.stock_status_id }}">{{ product.stock_status }}</p>
          {{ tbSlotCaptureReturn() }}{% endif %}
        </div>
        {% if product['show_label_sale'] %}{{ tbSlotStart('products_listing.product.label_sale') }}
        <p class="tb_label_special">{{ product.savings_text }}</p>
        {{ tbSlotCaptureReturn() }}{% endif %}
        {% if show_label_new and product.is_new %}{{ tbSlotStart('products_listing.product.label_new') }}
        <p class="tb_label_new">{{ tbData.text_label_new }}</p>
        {{ tbSlotCaptureReturn() }}{% endif %}
      </div>
    </div>
    {{ tbSlotStopReturn() }}
    {% endfor %}
  </div>
</div>

<script type="text/javascript">

tbApp.init{{ '{{widget_dom_id}}' }} = function() {
    tbApp.onScriptLoaded(function() {

        if (!tbUtils.is_touch) {

            {# // THUMB HOVER #}
            {% if thumbs_hover_action != 'none' %}
            thumb_hover('#{{ '{{widget_dom_id}}' }}', '{{ thumbs_hover_action }}');
            {% endif %}

            {# // THUMB ZOOM #}
            {% if thumbs_hover_action == 'zoom' %}
            $('#{{ '{{widget_dom_id}}' }}').find('.tb_zoom > img').elevateZoom({
                zoomType:           'inner',
                zoomWindowFadeIn:   300,
                zoomWindowFadeOut:  300,
                cursor:             'crosshair'
            });
            {% endif %}

            {# // PRODUCT HOVER #}
            {% if not (slider is not empty and elements_hover_action == 'append') and elements_hover_action != 'none' %}
            item_hover('#{{ '{{widget_dom_id}}' }}', '{{ active_elements }}', '{{ hover_elements }}', '{{ elements_hover_action }}');
            {% endif %}

        }

        {# // PRODUCT SLIDER #}
        {% if slider is not empty %}
        tbApp.itemSlider{{ '{{widget_dom_id}}' }} = createItemSlider('#{{ '{{widget_dom_id}}' }}', {{ products|length }}, {{ slider_step }}, {{ slider_speed }}, {% if slider_pagination %}{{ '\'#{{widget_dom_id}} .tb_slider_pagination\'' }}{% else %}{{ 'false' }}{% endif %}, {{ restrictions_json }}, {{ slider_autoplay }}, {{ slider_loop }});

        if (tbApp.itemSlider{{ '{{widget_dom_id}}' }}SwiperPromiseCallback !== undefined) {
            tbApp.itemSlider{{ '{{widget_dom_id}}' }}.swiperPromise.done(tbApp.itemSlider{{ '{{widget_dom_id}}' }}SwiperPromiseCallback);
        }
        {% endif %}

        {# // PRODUCT COUNTER #}
        {% if has_counter %}
        {% if slider is not empty %}
        tbApp.itemSlider{{ '{{widget_dom_id}}' }}.swiperPromise.done(function() {
          create_countdown('#{{ '{{widget_dom_id}}' }}','{{ 'now'|date('D M d Y H:i:s O') }}', '{{ 'now'|date('Z') / 3600 - 'now'|date('I') }}');
        });
        {% else %}
        create_countdown('#{{ '{{widget_dom_id}}' }}','{{ 'now'|date('D M d Y H:i:s O') }}', '{{ 'now'|date('Z') / 3600 - 'now'|date('I') }}');
        {% endif %}
        {% endif %}

    });
};
tbApp.exec{{ '{{widget_dom_id}}' }} = function() {
    tbApp.onScriptLoaded(function() {
        {# // ADJUST PRODUCT SIZE #}
        {% if view_mode == 'grid' %}
        if ({{ '{{within_group}}' }} || (!{{ '{{optimize_js_load}}' }} && !{{ tbData.system['js_lazyload'] }})) {
            adjustItemSize('#{{ '{{widget_dom_id}}' }}', {{ restrictions_json }});
        }
        {% endif %}

        {# // REFRESH SLIDER #}
        {% if slider is not empty %}
        tbApp.itemSlider{{ '{{widget_dom_id}}' }}.refresh();
        {% endif %}
    });
};

if (!{{ '{{within_group}}' }}) {
    if (!{{ tbData.system['js_lazyload'] }}) {
        tbApp.init{{ '{{widget_dom_id}}' }}();
        tbApp.exec{{ '{{widget_dom_id}}' }}();
    } else {
        $(document).on('lazybeforeunveil', function(e) {
            if ($(e.target).filter('#{{ '{{widget_dom_id}}' }}').length) {
                tbApp.init{{ '{{widget_dom_id}}' }}();
                tbApp.exec{{ '{{widget_dom_id}}' }}();
            }
        });
    }
}
</script>

{# // ADJUST PRODUCT SIZE #}

{% if view_mode == 'grid'
      and within_group is empty
      and (tbData.optimize_js_load or tbData.system.js_lazyload)
      %}
<script type="text/javascript" data-critical="1">
adjustItemSize('#{{ '{{widget_dom_id}}' }}', {{ restrictions_json }});
</script>
{% endif %}
{% endif %}
{{ tbSlotStop() }}{% endif %}


{# // Product Tags ---------------------------------------------------- #}

{{ tbData.slotStart('product/product.product_tags') }}
{% if tags %}
{% if tbData['system.product_tags']['block_title'] %}
<div class="panel-heading">
  <h2 class="panel-title">{{ text_tags }}</h2>
</div>
{% endif %}
<ul class="panel-body tb_tags tb_style_label clearfix">
  {% for tag in tags %}
  <li><a href="{{ tag.href }}">{{ tag.tag }}</a></li>
  {% endfor %}
</ul>
{% endif %}
{{ tbSlotStop() }}


{{ footer }}<b>Fatal error</b>: '<strong>Class 'Controllerproductproduct' not found</strong>' <br />
 in /home/schoolsr/storage/modification/system/engine/action.php:71<br />
Stack trace:<br />
#0 catalog/controller/startup/router.php(25): Action->execute(Object(Registry))<br />
#1 /home/schoolsr/storage/modification/system/engine/action.php(79): ControllerStartupRouter->index()<br />
#2 /home/schoolsr/storage/modification/system/engine/router.php(71): Action->execute(Object(Registry))<br />
#3 /home/schoolsr/storage/modification/system/engine/router.php(60): Router->execute(Object(Action))<br />
#4 system/framework.php(168): Router->dispatch(Object(Action), Object(Action))<br />
#5 system/startup.php(104): require_once('/home/schoolsr/...')<br />
#6 index.php(19): start('catalog')<br />
#7 {main}