{{ 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">
        {% 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" 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>
              <div class="button-group">
                <button  type="button" onclick='$("#card-{{ offer.salescombopge_id }}").flip("toggle");'>{{ button_viewdetails }}</button>
                <a href="{{ offer.href }}">{{ button_viewmore }}</a>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
<script type="text/javascript">
 {% for offer in salescombopge_info %}
$("#card-{{ offer.salescombopge_id }}").flip();
{% endfor %}
</script>
{{ footer }}
