{{ header }}
<div id="container" class="container j-container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row offers-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 }}
      {% if totaloffers %}
      <div class="alert alert-success success"><i class="fa fa-check-circle"></i> {{ totaloffers }}</div>
      {% endif %}
      <div class="row">{{ description }}
        {% for offer in salescombopge_info %}
        <div class="product-offer product-layout col-lg-4 col-md-4 col-sm-6 col-xs-12 product-grid-item xs-100 sm-50 md-50 lg-33 xl-25 display-both block-button">

          <div class="gift-thumb product-wrapper">
            {% if offer.thumb %}
            <div id="card-{{ offer.salescombopge_id }}" class="card sortpromo-{{ offer.sort_order }}" style="perspective: 1110px; position: relative; transform-style: preserve-3d;">
              <div class="front">
              <div class="image"><img src="{{ offer.thumb }}" alt="{{ offer.title }}" title="{{ offer.title }}" class="img-responsive" /></div>
              </div>
              <div class="back">
              {{ offer.rules }}
              </div>
            </div>
            <div>
            {% endif %}
              <div class="caption">
                <!-- <h4><a href="{{ offer.href }}">{{ offer.title }}</a></h4> -->
                <div class="promotion-title-caption">
                  <div class="promotion-title-caption-title">{{ offer.description }}</div>
                  <div>{{ offer.title }}</div>
                </div>
              </div>
              <div class="{{ offer.id }} availableofferblock button-group">
                 {% if offer.variation == 1 %}
                    {% for key,product in offer.primarypids %}
                    <input type="hidden" name="offer_productid" value="{{ product }}" id="{{ offer.primaryquant }}">
                    {% endfor %}

                    <button  type="button" onclick='$("#card-{{ offer.salescombopge_id }}").flip("toggle");'>{{ button_viewdetails }}</button>

                    <button type="button" onclick="offer('{{ offer.id }}');" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> {{ button_bundle }}</button>
                 {% elseif offer.variation == 8 %}

                     <button  type="button" onclick='$("#card-{{ offer.salescombopge_id }}").flip("toggle");'>{{ button_viewdetails }}</button>

                     <button  type="button" onclick="window.location.href='{{ offerlink }}'">{{ offerlinktext }}</button>

                 {% else %}
                    {% for key,product in offer.primarypids %}
                    <input type="hidden" name="offer_productid" value="{{ product }}" id="{{ offer.primaryquant }}">
                    {% endfor %}
                    {% for key,product in offer.secondarypids %}
                    <input type="hidden" name="offer_productid" value="{{ product }}" id="{{ offer.secondaryquant }}">
                    {% endfor %}

                    <button  type="button" onclick='$("#card-{{ offer.salescombopge_id }}").flip("toggle");'>{{ button_viewdetails }}</button>

                    <button type="button" onclick="offer('{{ offer.id }}');" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> {{ button_bundle }}</button>
                 {% endif %}




              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script type="text/javascript">
function offer(id) {
  $(".availableofferblock."+id + " input[name=offer_productid]").each(function() {
    cart.add($(this).val(),$(this).attr("id"));
  });
};

$(document).ready(function(){
  // $('.gift-thumb.product-wrapper > .card > .front:hover').addClass();
  $('.gift-thumb.product-wrapper > .card').hover(function(){
    // $('.gift-thumb.product-wrapper > .card > .front').removeClass('revertback');
    // // $('.gift-thumb.product-wrapper > .card > .back').addClass('backrevert');
    // $('.gift-thumb.product-wrapper > .card > .back').addClass('backrevert');
    // }, function(){
    // $('.gift-thumb.product-wrapper > .card > .front').addClass('revertback');
    // // $('.gift-thumb.product-wrapper > .card > .back').removeClass('backrevert');
    //
    // $('.gift-thumb.product-wrapper > .card > .back').removeClass('backrevert');
  });
});

{% for offer in salescombopge_info %}
$("#card-{{ offer.salescombopge_id }}").flip();
{% endfor %}
</script>
{{ footer }}
