{{ header }}
{{ content_top }}
<section class="product-page py-3 py-md-5">
	<div class="container-fluid">
		<div class="row g-3">
			<div class="col-md-6">
				
				<div class="d-md-none mb-4 position-relative">
					<ul class="breadcrumb">
					{% for key,breadcrumb in breadcrumbs %}
						<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
					{% endfor %}
					</ul>
					<h1 class="h1 product-title">{{ heading_title }}</h1>
					
					<div class="fav-btn" onclick="wishlist.add('{{ product_id }}');return false;"><svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M0.304688 9.85026C0.304688 16.8004 6.12908 23.6363 15.3307 29.5097C15.6733 29.7217 16.1627 29.9502 16.5053 29.9502C16.8479 29.9502 17.3374 29.7217 17.6963 29.5097C26.8815 23.6363 32.7059 16.8004 32.7059 9.85026C32.7059 4.0748 28.7415 -0.00390625 23.4554 -0.00390625C20.4372 -0.00390625 17.9899 1.43179 16.5053 3.6343C15.0534 1.44811 12.5734 -0.00390625 9.5552 -0.00390625C4.2692 -0.00390625 0.304688 4.0748 0.304688 9.85026ZM2.93138 9.85026C2.93138 5.51051 5.73752 2.62278 9.52257 2.62278C12.5898 2.62278 14.3517 4.53162 15.3959 6.1631C15.8363 6.8157 16.1138 6.99516 16.5053 6.99516C16.8969 6.99516 17.1417 6.79938 17.6147 6.1631C18.7405 4.56424 20.4372 2.62278 23.488 2.62278C27.2731 2.62278 30.0793 5.51051 30.0793 9.85026C30.0793 15.9193 23.6675 22.4617 16.8479 26.9972C16.6848 27.1114 16.5706 27.1929 16.5053 27.1929C16.44 27.1929 16.3258 27.1114 16.179 26.9972C9.34311 22.4617 2.93138 15.9193 2.93138 9.85026Z" fill="white"/>
					</svg>
					</div>
				</div>
				{% if images %}
				<div class="swiper mySwiper2 mb-3" style="--swiper-navigation-color:#000;--swiper-navigation-size:25px">
					<div class="swiper-wrapper">
						{% for image in images %}
						<div class="swiper-slide text-center">
							<div class="zoo-item d-inline-block position-relative" zoo-image="{{ image.popup }}" zoo-scale="2" zoo-cursor="move" style="aspect-ratio: 45 / 60;max-width: 450px;cursor: move">
								<img data-popup="{{ image.popup }}" src="{{ image.popup }}" loading="lazy" title="{{ heading_title }}" alt="{{ heading_title }}" />
							</div>
						</div>
						
						{% endfor %}
					</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				  </div>
				  <div thumbsSlider="" class="swiper mySwiper">
					<div class="swiper-wrapper justify-content-center">
						{% for image in images %}
						<div class="swiper-slide px-3 sw-thumb" style="width: auto">
							<img data-popup="{{ image.popup }}" src="{{ image.thumb }}" loading="lazy" title="{{ heading_title }}" alt="{{ heading_title }}"/>
						</div>
						{% endfor %}
						
					  
					</div>
				  </div>
					
						<script>
							$('.zoo-item').ZooMove();
							
							var swiper = new Swiper(".mySwiper", {
							  slidesPerView: 'auto',
							  
							});
							var swiper2 = new Swiper(".mySwiper2", {
							  spaceBetween: 10,
							  navigation: {
								nextEl: ".swiper-button-next",
								prevEl: ".swiper-button-prev",
							  },
							  thumbs: {
								swiper: swiper,
							  },
							});					
					</script>
				{% endif %}					
				  
				 
			</div>
			
			<div class="col-md-6">
				<div class=" d-none d-md-block position-relative">
					<ul class="breadcrumb">
					{% for key,breadcrumb in breadcrumbs %}
						<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
					{% endfor %}
					</ul>
					
					<h1 class="h1">{{ heading_title }}</h1>
					<div class="fav-btn" onclick="wishlist.add('{{ product_id }}');return false;">
						<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M0.304688 9.85026C0.304688 16.8004 6.12908 23.6363 15.3307 29.5097C15.6733 29.7217 16.1627 29.9502 16.5053 29.9502C16.8479 29.9502 17.3374 29.7217 17.6963 29.5097C26.8815 23.6363 32.7059 16.8004 32.7059 9.85026C32.7059 4.0748 28.7415 -0.00390625 23.4554 -0.00390625C20.4372 -0.00390625 17.9899 1.43179 16.5053 3.6343C15.0534 1.44811 12.5734 -0.00390625 9.5552 -0.00390625C4.2692 -0.00390625 0.304688 4.0748 0.304688 9.85026ZM2.93138 9.85026C2.93138 5.51051 5.73752 2.62278 9.52257 2.62278C12.5898 2.62278 14.3517 4.53162 15.3959 6.1631C15.8363 6.8157 16.1138 6.99516 16.5053 6.99516C16.8969 6.99516 17.1417 6.79938 17.6147 6.1631C18.7405 4.56424 20.4372 2.62278 23.488 2.62278C27.2731 2.62278 30.0793 5.51051 30.0793 9.85026C30.0793 15.9193 23.6675 22.4617 16.8479 26.9972C16.6848 27.1114 16.5706 27.1929 16.5053 27.1929C16.44 27.1929 16.3258 27.1114 16.179 26.9972C9.34311 22.4617 2.93138 15.9193 2.93138 9.85026Z" fill="white"/>
						</svg>
						
           
					</div>
					
					
				</div>
				<div class="mt-5">
					 {% if manufacturer %}
					<div>{{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer }}</a></div>
					{% endif %}
					<div>{{ text_model }} {{ model }}</div>
				</div>
				{% if price or price_2 or price_3 %}
				<div class="prices mt-3">
					
					<div class="h4 fw-bolder">Стоимость:</div>
					{% if price %}
					<table>
					  <tbody class="fs-4">
						{% if price_n|round %}
						<tr>
						  <td>Первый прокат</td>
						  <td class="fw-bold px-3">{{ price }}</td>
						</tr>
						{% endif %}
						{% if price_2_n|round %}
						<tr>
						  <td>Второй прокат</td>
						  <td class="fw-bold px-3">{{ price_2 }}</td>
						</tr>
						{% endif %}
						{% if price_3_n|round %}
						<tr>
						  <td>Покупка</td>
						  <td class="fw-bold px-3">{{ price_3 }}</td>
						</tr>
						{% endif %}
					  </tbody>
					</table>
					{% endif %}
				</div>
				{% endif %}
				<div class="mt-5">
					<button type="button" class="btn btn-dark py-3 px-5 w-mob-100" onclick="SendRequest('{{ product_id }}')">Записаться на примерку</button>
					</div>
					<div class="mt-5">
						{% set description_tabs = [
							{'title': 'Описание', 'content': description, 'show_attributes': true},
							{'title': 'Первый прокат', 'content': description_first_rental},
							{'title': 'Второй прокат', 'content': description_second_rental},
							{'title': 'Покупка', 'content': description_purchase},
							{'title': 'Условия', 'content': description_terms}
						] %}
						<ul class="nav nav-tabs mb-3 justify-content-center justify-content-md-start" id="myTab" role="tablist">
							{% set i = 0 %}
							{% for tab in description_tabs %}
							{% if tab.content or (tab.show_attributes and attribute_groups) %}
							<li class="nav-item" role="presentation">
								<button class="nav-link {{ i == 0 ? 'active' : '' }}" id="home-tab-{{ loop.index0 }}" data-bs-toggle="tab" data-bs-target="#home-{{ loop.index0 }}" type="button" role="tab" aria-controls="home-{{ loop.index0 }}" aria-selected="{{ i == 0 ? 'true' : 'false' }}">{{ tab.title }}</button>
							</li>
						
						{% set i = i + 1 %}
						{% endif %}
						{% endfor %}
					  
					 
						</ul>
						<div class="tab-content" id="myTabContent">
							{% set i = 0 %}
							{% for tab in description_tabs %}
							{% if tab.content or (tab.show_attributes and attribute_groups) %}
							<div class="tab-pane fade {{ i == 0 ? 'show active' : '' }}" id="home-{{ loop.index0 }}" role="tabpanel" aria-labelledby="home-tab-{{ loop.index0 }}">

								{% if tab.show_attributes and attribute_groups %}
							
							<div class="mb-4">
								{% for attribute_group in attribute_groups %} 
								
								<div class="row g-3">
									{% for attribute in attribute_group.attribute %}
									<div class="col-md-4">
										<span class="fw-bolder">{{ attribute.name }}</span>
									</div>
									<div class="col-md-4">
										{{ attribute.text }}
									</div>
									{% endfor %}
								</div>
								
								{% endfor %}
								</div>
								{% endif %}
								{{ tab.content }}
						</div>
						{% set i = i + 1 %}
						{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="mt-5">
					<script src="https://yastatic.net/share2/share.js"></script>
					<div class="ya-share2" data-curtain data-size="l" data-color-scheme="whiteblack" data-services="vkontakte,odnoklassniki,telegram,twitter,viber,whatsapp"></div>
				</div>
			</div>
		</div>
	</div>
</section>
{% if products %}
<section class="blog-article-section blog-article-products">
	<div class="container-fluid">
		<div class="blog-article-section__head">
			<span class="blog-category-eyebrow">Вам может понравиться</span>
			<h2>{{ text_related }}</h2>
		</div>
		<div class="row g-3 product-items">
			{% for product in products %}
			<div class="col-6 col-lg-3">
				{% include 'dominik/template/common/product.twig' %}
			</div>
			{% endfor %}
		</div>
	</div>
</section>
{% endif %}

{% if articles %}
<section class="blog-article-section blog-article-related">
	<div class="container-fluid">
		<div class="blog-article-section__head">
			<span class="blog-category-eyebrow">Полезно знать</span>
			<h2>{{ text_related_article }}</h2>
		</div>
		<div class="blog-article-related__grid">
			{% for article in articles %}
			<article class="blog-category-card">
				<a href="{{ article.href }}" class="blog-category-card__image">
					<img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" loading="lazy" />
				</a>
				<div class="blog-category-card__body">
					<div class="blog-category-card__meta">
						<time>{{ article.date_added }}</time>
						<span class="blog-category-card__divider"></span>
						<span class="blog-category-card__views">
							<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
								<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
								<circle cx="12" cy="12" r="2.5"></circle>
							</svg>
							{{ article.viewed }}
						</span>
					</div>
					<h3><a href="{{ article.href }}">{{ article.name }}</a></h3>
					<p>{{ article.description }}</p>
					<div class="blog-category-card__footer">
						<a href="{{ article.href }}" class="blog-category-card__link">
							{{ button_more }}
							<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
								<path d="M0 6h16M11 1l5 5-5 5"></path>
							</svg>
						</a>
					</div>
				</div>
			</article>
			{% endfor %}
		</div>
	</div>
</section>
{% endif %}
{{ content_bottom }}
{{ footer }} 
{# 
<div id="product-product" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <div class="row"> {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-8' %}
        {% endif %}
        <div class="{{ class }}"> {% 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 %}
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
            {% if attribute_groups %}
            <li><a href="#tab-specification" data-toggle="tab">{{ tab_attribute }}</a></li>
            {% endif %}
            {% if review_status %}
            <li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
            {% endif %}
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-description">{{ description }}</div>
            {% if attribute_groups %}
            <div class="tab-pane" id="tab-specification">
              <table class="table table-bordered">
                {% for attribute_group in attribute_groups %}
                <thead>
                  <tr>
                    <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
                  </tr>
                </thead>
                <tbody>
                {% for attribute in attribute_group.attribute %}
                <tr>
                  <td>{{ attribute.name }}</td>
                  <td>{{ attribute.text }}</td>
                </tr>
                {% endfor %}
                  </tbody>
                {% endfor %}
              </table>
            </div>
            {% endif %}
            {% if review_status %}
            <div class="tab-pane" id="tab-review">
              <form class="form-horizontal" id="form-review">
                <div id="review"></div>
                <h2>{{ text_write }}</h2>
                {% if review_guest %}
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-name">{{ entry_name }}</label>
                    <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-review">{{ entry_review }}</label>
                    <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">
                  <div class="col-sm-12">
                    <label class="control-label">{{ entry_rating }}</label>
                    &nbsp;&nbsp;&nbsp; {{ entry_bad }}&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 }}
                <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>
                {% else %}
                {{ text_login }}
                {% endif %}
              </form>
            </div>
            {% endif %}</div>
        </div>
        {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-4' %}
        {% endif %}
        <div class="{{ class }}">
          <div class="btn-group">
            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i></button>
            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i></button>
          </div>
          <h1>{{ heading_title }}</h1>
          <ul class="list-unstyled">
            {% if manufacturer %}
            <li>{{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
            {% endif %}
            <li>{{ text_model }} {{ model }}</li>
            {% if reward %}
            <li>{{ text_reward }} {{ reward }}</li>
            {% endif %}
            <li>{{ text_stock }} {{ stock }}</li>
          </ul>
          {% if price %}
          <ul class="list-unstyled">
            {% if not special %}
            <li>
              <h2>{{ price }}</h2>
            </li>
            {% else %}
            <li><span style="text-decoration: line-through;">{{ price }}</span></li>
            <li>
              <h2>{{ special }}</h2>
            </li>
            {% endif %}
            {% if tax %}
            <li>{{ text_tax }} {{ tax }}</li>
            {% endif %}
            {% if points %}
            <li>{{ text_points }} {{ points }}</li>
            {% endif %}
            {% if discounts %}
            <li>
              <hr>
            </li>
            {% for discount in discounts %}
            <li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
            {% endfor %}
            {% endif %}
          </ul>
          {% endif %}
          <div id="product"> {% if options %}
            <hr>
            <h3>{{ text_option }}</h3>
            {% for option in options %}
            {% 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>
              <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>
            {% endif %}
            {% if option.type == 'radio' %}
            <div class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                <div class="radio">
                  <label>
                    <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 %}                  
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% endfor %} </div>
            </div>
            {% endif %}
            {% if option.type == 'checkbox' %}
            <div class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                <div class="checkbox">
                  <label>
                    <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 %}
                    {{ option_value.name }}
                    {% if option_value.price %}
                    ({{ option_value.price_prefix }}{{ option_value.price }})
                    {% endif %} </label>
                </div>
                {% endfor %} </div>
            </div>
            {% endif %}
            {% 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>
              <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>
            {% endif %}
            {% 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>
              <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>
            {% endif %}
            {% if option.type == 'file' %}
            <div class="form-group{% if option.required %} required {% endif %}">
              <label class="control-label">{{ option.name }}</label>
              <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><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>
            {% endif %}
            {% 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="input-group date">
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ 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" type="button"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% 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="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"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% 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="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"><i class="fa fa-calendar"></i></button>
                </span></div>
            </div>
            {% endif %}
            {% endfor %}
            {% endif %}
            {% if recurrings %}
            <hr>
            <h3>{{ text_payment_recurring }}</h3>
            <div class="form-group required">
              <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>
            {% endif %}
            <div class="form-group">
              <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
              <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
              <input type="hidden" name="product_id" value="{{ product_id }}" />
              <br />
              <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>
            </div>
            {% if minimum > 1 %}
            <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
            {% endif %}</div>
          {% if review_status %}
          <div class="rating">
            <p>{% for i in 1..5 %}
              {% if rating < i %}<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>{% else %}<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>{% endif %}
              {% endfor %} <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ reviews }}</a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ text_write }}</a></p>
            <hr>
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style" data-url="{{ share }}"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-515eeaf54693130e"></script> 
            <!-- AddThis Button END --> 
          </div>
          {% endif %} </div>
      </div>
      {% if products %}
      <h3>{{ text_related }}</h3>
      <div class="row"> {% set i = 0 %}
        {% for product in products %}
        {% if column_left and column_right %}
        {% set class = 'col-xs-8 col-sm-6' %}
        {% elseif column_left or column_right %}
        {% set class = 'col-xs-6 col-md-4' %}
        {% else %}
        {% set class = 'col-xs-6 col-sm-3' %}
        {% endif %}
        <div class="{{ class }}">
          <div class="product-thumb transition">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
              <p>{{ product.description }}</p>
              {% if product.rating %}
              <div class="rating"> {% for j in 1..5 %}
                {% if product.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
                {% endfor %} </div>
              {% endif %}
              {% if product.price %}
              <p class="price"> {% if not product.special %}
                {{ product.price }}
                {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
              {% endif %} </div>
            <div class="button-group">
              <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span> <i class="fa fa-shopping-cart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        {% if column_left and column_right and (i + 1) % 2 == 0 %}
        <div class="clearfix visible-md visible-sm"></div>
        {% elseif column_left or column_right and (i + 1) % 3 == 0 %}
        <div class="clearfix visible-md"></div>
        {% elseif (i + 1) % 4 == 0 %}
        <div class="clearfix visible-md"></div>
        {% endif %}
        {% set i = i + 1 %}
        {% endfor %} </div>
        {% endif %}
        {% if tags %}
        <p>{{ text_tags }}
        {% for i in 0..tags|length - 1 %}
        {% if i < (tags|length - 1) %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>,
        {% else %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %}
        {% endfor %} </p>
        {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script type="text/javascript"><!--
$('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-dismissible, .text-danger').remove();

			if (json['success']) {
				$('#recurring-description').html(json['success']);
			}
		}
	});
});
//--></script> 
<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
		dataType: 'json',
		beforeSend: function() {
			$('#button-cart').button('loading');
		},
		complete: function() {
			$('#button-cart').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible, .text-danger').remove();
			$('.form-group').removeClass('has-error');

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

						if (element.parent().hasClass('input-group')) {
							element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
						} else {
							element.after('<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').parent().addClass('has-error');
			}

			if (json['success']) {
				$('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

				$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

				$('html, body').animate({ scrollTop: 0 }, 'slow');

				$('#cart > ul').load('index.php?route=common/cart/info ul li');
			}
		},
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
	});
});
//--></script> 
<script type="text/javascript"><!--
$('.date').datetimepicker({
	language: '{{ datepicker }}',
	pickTime: false
});

$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: true,
	pickTime: true
});

$('.time').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: false
});

$('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);
});
//--></script> 
<script type="text/javascript"><!--
$('#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 }}');

$('#button-review').on('click', function() {
	$.ajax({
		url: 'index.php?route=product/product/write&product_id={{ product_id }}',
		type: 'post',
		dataType: 'json',
		data: $("#form-review").serialize(),
		beforeSend: function() {
			$('#button-review').button('loading');
		},
		complete: function() {
			$('#button-review').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

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

			if (json['success']) {
				$('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').prop('checked', false);
			}
		}
	});
});

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
	});
});
//--></script> 

#}
