<?php echo $header; ?>

<div class="container-fluid p-0 bread_backg">

  <? if ($description): ?>

    <div class="container hidden-xs">

      <?= $description; ?>

    </div>

  <? endif; ?>

  <div class="container-fluid p-0 bread_backg">

    <div class="container">

        <ul class="breadcrumb">

          <?php foreach ($breadcrumbs as $breadcrumb) { ?>

          <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>

          <?php } ?>

        </ul>

    </div>

  </div>

</div>

<style>

#search .input-lg {

    height: 30px !important;

}

</style>

<div class="container">

  <div class="row"><?php echo $column_left; ?>

    <?php if ($column_left && $column_right) { ?>

    <?php $class = 'col-sm-6'; ?>

    <?php } elseif ($column_left || $column_right) { ?>

    <?php $class = 'col-sm-9'; ?>

    <?php } else { ?>

    <?php $class = 'col-sm-12'; ?>

    <?php } ?>

    <div id="content" class="text-center <?php echo $class; ?> category-page"><?php echo $content_top; ?>

      <h1 class="h1_category"><?php echo $heading_title; ?></h1>

<div class="row d-none">

        <div class="col-md-2 col-sm-6 hidden-xs">

          <div class="btn-group btn-group-sm">

            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>

            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>

          </div>

        </div>

      </div>

<div class="row">

<?php

$product_ids=array();

        foreach ($products as $index => $product) {

        $product_ids[] = $product['product_id'];

        ?>

        <div class="product-layout product-list col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-20 d-none">

          <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');" class="btnWish"><i class="fa fa-heart-o"></i></button>

          <div class="product-thumb pb-90 pb-105_m mb-20">

            <? if ($product ['product_type']): ?>

              <? foreach ($product ['collection_color'] as $c_index => $color): ?>

                <div class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> image">

                  <a href="<?php echo $color['href']; ?>" id="ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>" class="custom-0004 owl-carousel">

                    <img data-src="<?php echo $color ['image']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />

                    <? foreach ($color ['images'] as $image): ?>

                      <img data-src="<?php echo $image ['popup']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />

                    <? endforeach; ?>

                  </a>

                  <script>

                    jQuery (function ($) {

                      $('#ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>').owlCarousel ({

                        items: 1,

                        lazyLoad: true,

                        dots: true

                      });

                    });

                  </script>

                </div>

              <? endforeach; ?>

            <? else: ?>

              <div class="image">

                <a href="<?php echo $product['href']; ?>" id="ProductImageCarousel__<?= $index; ?>" class="custom-0004 owl-carousel">

                  <img data-original="<?php echo $product ['thumb']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive lazy" />

                  <? foreach ($product ['images'] as $image): ?>

                    ss<img data-original="<?php echo $image ['popup']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive lazy" />

                  <? endforeach; ?>

                </a>

                <script>

                  jQuery (function ($) {

                    $('#ProductImageCarousel__<?= $index; ?>').owlCarousel ({

                      items: 1,

                      dots: true

                    });

                  });

                </script>

              </div>

            <? endif; ?>

            <div class="custom-0007 d-none">

              <? if ($product ['product_type']): ?>

                <div class="FlexScroller <?= (4 < count($product ['collection_color']))? '': 'justify-content-center'; ?>">

                  <? foreach ($product ['collection_color'] as $color): ?>

                    <? if ($color ['show']): ?>

                      <div class="PP__CaseCircle_Cat">

                        <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= $product ['product_id']; ?>);">

                          <img src="<?= $color ['attribute_image']; ?>" alt="" />

                        </a>

                      </div>

                    <? endif; ?>

                  <? endforeach; ?>

                  <? foreach ($product ['collection_color'] as $color): ?>

                    <? if (! $color ['show']): ?>

                      <div class="PP__CaseCircle_Cat">

                        <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= $product ['product_id']; ?>);">

                          <img src="<?= $color ['attribute_image']; ?>" alt="" />

                        </a>

                      </div>

                    <? endif; ?>

                  <? endforeach; ?>

                </div>

              <? endif; ?>

              <div class="caption">

                <h4>

                  <? if ($product ['product_type']): ?>

                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>

                      <a class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?>" href="<?php echo $color ['href']; ?>"><?php echo $color ['name']; ?></a>

                    <? endforeach; ?>

                  <? else: ?>

                    <a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>

                  <? endif; ?>

                </h4>

                <?php if ($product['price']) { ?>

                  <? if ($product ['product_type']): ?>

                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>

                      <p class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> price">

                        <?php if (!$color['special']) { ?>

                        <?php echo $color['price']; ?>

                        <?php } else { ?>

                        <span class="price-new"><?php echo $color['special']; ?></span> <span class="price-old"><?php echo $color['price']; ?></span>

                        <?php } ?>

                      </p>

                    <? endforeach; ?>

                  <? else: ?>

                    <p class="price">

                      <?php if (!$product['special']) { ?>

                      <?php echo $product['price']; ?>

                      <?php } else { ?>

                      <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>

                      <?php } ?>

                    </p>

                  <? endif; ?>

                <?php } ?>

              </div>

            </div>

          </div>

        </div>

        <?php }

        $product_ids=json_encode($product_ids);

        ?>

<script>

          var PS = function (AttrPrd_ID, Product_ID) {

            $('.PS-' + Product_ID).addClass ('d-none');

            $('.PS-' + AttrPrd_ID).removeClass ('d-none');

$(document).scrollTop ($(document).scrollTop () + 1);

            $(document).scrollTop ($(document).scrollTop () - 1);

          };

        </script>

      </div>

<?php echo $content_bottom; ?></div>

    <?php echo $column_right; ?></div>

</div>

<script>

  jQuery (function ($) {

    $('.product-layout').removeClass ('d-none');

  });

</script>

<?php

if($CretioOneTag_status)

{

?>

<!-- Criteo Category / Listing Tag -->

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>

<script type="text/javascript">

window.criteo_q = window.criteo_q || [];

var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

window.criteo_q.push(

 { event: "setAccount", account: '<?php echo $CretioOneTag_id ?>'}, // You should never update this line

 { event: "setEmail", email: "" }, // Can be an empty string

 { event: "setSiteType", type: deviceType},

 { event: "viewList", item: <?php echo $product_ids ?> });

</script>

<!-- END Criteo Category / Listing Tag -->

<?php

}

?>
<?php echo $footer; ?>

