<!doctype html>
<html lang="en">
  <head>
    {{> head title="Components" }}
  </head>
  <body class="components-page">
  <div class="component">
    <div class="container">
      <h2>C-04-Store-Locator</h2>
      {{> find-a-store data-action = "./page_store-locator-list.html#stores-list" }}
    </div>
  </div>
  <div class="component">
    <a id="recently-viewed"></a>
    <h2 class="container">С-05-Recently-viewed</h2>
    {{> recently-viewed }}
  </div>

  <div class="component">
    {{> similar-products-v2 }}
  </div>

  <div class="component">
    {{> seo-widgets title="More products" }}
    {{> seo-widgets title="Related category" }}
  </div>

  <div class="component">
    <div class="container">
      <h2><a id="accordion"></a>C-12-Accordion</h2>
      {{#extend "accordion" header="Will I be contacted before delivery?" collapsed="accordion_collapsed" hidden="hidden-state"}}
        {{#content "content"}}
          The cards we accept are listed at the bottom of the 'basket' page. We currently accept MasterCard and Visa debit & credit cards (including Visa Electron), as well as Delta and Maestro debit cards. American Express credit cards are only accepted in-store.
        {{/content}}
      {{/extend}}
      {{#extend "accordion" header="Which cards do you accept?"}}
        {{#content "content"}}
          The cards we accept are listed at the bottom of the 'basket' page. We currently accept MasterCard and Visa debit & credit cards (including Visa Electron), as well as Delta and Maestro debit cards. American Express credit cards are only accepted in-store.
        {{/content}}
      {{/extend}}
    </div>
  </div>

  <div class="component">
    <div class="container">
      <h2>C-14-Tables</h2>
      <div class="row">
        <div class="content">
          {{> table_profile }}
          {{#with page_my-account_payment-details.payment-cards.[0] }}
            {{> table_payment }}
          {{/with }}
          <div class="component">
            {{#with page_my-account_order-history.orders.[0] }}
              {{> table_order-history }}
            {{/with }}
          </div>
          <div class="component">
            {{#with page_my-account_order-details.orders.[0] }}
              {{> table_order-details }}
            {{/with }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="map"></a>C-16-Map</h2>
      <div class="row">
        <div class="col col-lg-9 col-md-12">
        {{> map }}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="pagination"></a>C-20-Pagination</h2>
      <div class="row justify-content-center">
        <div class="col-3">
         {{> pagination pagination1="true"}}
          <div class="d-none d-md-block">{{> pagination pagination2="true"}}</div>
         {{> pagination pagination3="true"}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <h2 class="container">C-30-Basket-Merge</h2>
    {{> merge-basket-options }}
  </div>
  <div class="component">
    <div class="container">
      <h2>C-31-Basket-Merge-Preview</h2>
      <div class="row">
        <div class="content">
          {{#with page_merge-basket.loggedInBasket.[0]}}
            {{>order-line mod="order-line_shrink"}}
          {{/with}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2>C-33-Details-Address</h2>
      <div class="row">
        <div class="content my-account_address-book">
          {{#with page_my-account-address-book}}
             {{> user-address editUrl="#" radioName="example-user-address" withRemoveBtn="true" isOnAccount=true}}
          {{/with}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="left-nav"></a>C-36-Left-Isle_navigation-Accordion</h2>
      <div class="row">
        <div class="col-12 col-lg-3">
          {{> aside-nav left-nav }}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="left-nav2"></a>C-37-Left-Hand_navigation-Dropdown</h2>
      <div class="row">
        <div class="col-12 col-lg-3">
          {{> aside-nav2 page-name="Components"}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="range-card-large"></a>C-44-Range-Card-large</h2>
      {{> range-card range-list-page.ranges.[0] }}
    </div>
  </div>
  <div class="component">
    <h2 class="container"><a id="finance"></a>C-48-Finance</h2>
    {{> finance }}
  </div>
  <div class="component">
    <div class="container">
      <h2>C-49-Tabs</h2>
      <div class="row">
        <div class="col-12">
          {{> tabs-demo }}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2>C-50-Gallery-type2</h2>
      {{> gall_type-2}}
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="banner2"></a>C-51-Banner-2</h2>
      <div class="row">
        <div class="col col-12 col-md-4">
          {{> banner-2 }}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2>С-54-Anchor-nav</h2>
      {{> anchor-nav }}
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="gallery-type1"></a>C-55-Gallery-type1</h2>
      <div class="gallery_type1__wrapper">
        {{> gallery range-list-page.ranges.[0].slider modification="gallery_bordered gallery_type1" slidesCount="11" }}
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2>C-57-Order-Item</h2>
      <div class="row">
        <div class="content">
          {{#with page_order-details.lines.[0]}}
            {{>order-line}}
          {{/with}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="banner"></a>Banner</h2>
      <div class="row">
        <div class="col-10">
           {{>banner imgSrc="./img/placeholders/tools_large.jpg" bannerData=page_category-landing.banner-info}}
        </div>
      </div>
    </div>
  </div>

  {{!--
  <div class="component">
    <div class="container">
      <h2><a id="store-locator-card"></a>Store Locator Card</h2>
      <div class="row">
        <div class="col-12 col-md-4 col-lg-3">
          {{> card-store-locator distance="true" view-map="true"}}
        </div>
      </div>
    </div>
  </div>
  <div class="component">
    <div class="container">
      <h2><a id="popup"></a>Popup (modal)</h2>
      <div class="row">
        <div class="col-12 col-md-6">
          <p>Full width modal example - covers full screen on mobile breakpoints</p>
          <a href="#" class="link-secondary" data-toggle="modal" data-target="#modalExampleFullSize">
            Full width modal example link
          </a>
        </div>
        <div class="col-12 col-md-6">
          <p>Simple modal example</p>
          <a href="#" class="link-secondary" data-toggle="modal" data-target="#modalExample">
            Simple modal example link
          </a>
        </div>
      </div>
    </div>
  </div>
  {{#extend "modal" id="modalExampleFullSize" title="Forgotten password" fullWidth=true}}
    {{#content "body"}}
      {{#extend "request-pass" id="example-id" button-text="Request your new password"}}
        {{#content "info-top"}}
          Please enter the email address for your Wickes account.<br />
          A link to change your password will be emailed to you.
        {{/content}}
      {{/extend}}
    {{/content}}
  {{/extend}}
  {{#extend "modal" id="modalExample" title="Simple modal example"}}
    {{#content "body"}}
      {{#extend "request-pass" id="example-id-2" button-text="Request your new password"}}
        {{#content "info-top"}}
          Please enter the email address for your Wickes account.<br />
          A link to change your password will be emailed to you.
        {{/content}}
      {{/extend}}
    {{/content}}
  {{/extend}}
  --}}

  {{> scripts }}
  <script>
    var Wick = Wick || {};
    Wick.GalleryType1 = (function(){
      var $gallery = $('.gallery.gallery_type1'),
              mainContainer = '.gallery__main',
              thumbContainer = '.gallery__thumbs',
              thumbActive = 'gallery__thumb_active';

      function getMainParams(loopedSlides){
        return {
          roundLengths: true,
          watchOverflow: true,
          navigation: {
            nextEl: $gallery.find('.gallery__btn-next')[0],
            prevEl: $gallery.find('.gallery__btn-prev')[0]
          },
          pagination: {
            el: '.gallery__pagination',
            type: 'bullets',
            bulletClass: 'gallery__pagination-bullet',
            bulletActiveClass: 'gallery__pagination-bullet_active'
          },
          slidesPerView: 1,
          loop: true,
          loopedSlides: loopedSlides,
          autoplay: {
            delay: 5000 //this option intended for specify slider-delay in milliseconds.
          }
        };
      }

      function getThumbParams(){
        var cnt = $gallery.find(thumbContainer)[0],
                slidesPerView = cnt.dataset.slides,
                isLocked = $(cnt).find('.swiper-wrapper').children().length <= slidesPerView,
                width = cnt.offsetWidth,
                spaceBetween = spaceBetween = (width - (width > 600 ? 58 : 50) * slidesPerView) / (slidesPerView - 1);

        return {
          roundLengths: true,
          watchOverflow: true,
          navigation: {
            nextEl: $gallery.find('.thumbs__btn-next'),
            prevEl: $gallery.find('.thumbs__btn-prev')
          },
          spaceBetween: spaceBetween,
          slidesPerView: slidesPerView,
          loop: !isLocked,
          slideToClickedSlide: true
        };
      }

      function ActiveIndex(slider, thumbnails) {
        var self = this;

        this.setActiveImage = function(_index){
          slider.slideTo(_index);
          $(thumbnails.slides).removeClass(thumbActive).eq(_index).addClass(thumbActive);
        };

        this.setActiveThumbnail = function(_index){
          $(thumbnails.slides).removeClass(thumbActive).eq(_index).addClass(thumbActive);
        };

        slider
                .on('slideChange', function(){
                  self.setActiveThumbnail(this.realIndex);
                  $(document).trigger('_slideChange');
                });

        thumbnails
                .on('tap', function(){
                  self.setActiveImage($(this.clickedSlide).index());
                });

        self.setActiveThumbnail(slider.realIndex);
      }

      var createSlider = function(){
        var main = $gallery.find(mainContainer)[0],
                thumbs = $gallery.find(thumbContainer)[0],
                sl = new Swiper(main, getMainParams(thumbs.dataset.slides)),
                th = new Swiper(thumbs, getThumbParams());

        if (!th.isLocked) {
          sl.controller.control = th;
          th.controller.control = sl;
        } else {
          new ActiveIndex(sl, th);
          th.$el.addClass('is-locked');
        }
      };

      $(document).ready(function () {
        if (!$gallery.length){
          return;
        }

        createSlider();
      });
    })();

    Wick.GallType2 = (function () {
      var $gallery = $('.gallery-type2');

      var getParameters = function (element) {
        return {
          roundLengths: true,
          navigation: {
            nextEl: $(element).find('.gallery-type2__btn-next')[0],
            prevEl: $(element).find('.gallery-type2__btn-prev')[0]
          },
          slidesPerView: 1,
          spaceBetween: 10,
          watchOverflow: true,
          loop: true
        }
      };

      var destroySliders = function (slider) {
        $gallery.each(function(index, element){
          var slider = element.swiper;
          if (slider){
            slider.destroy();
          }
        });
      };

      var createSliders = function () {
        $gallery.each(function(index, element){
          var slider = element.swiper;
          if (slider){
            slider.destroy();
          }
          slider = new Swiper(element, getParameters(element));
        });
      };

      var init = function () {
        Wick.Responsive.onBreakpoint(function () {
          createSliders();
        }, 'down-sm');
        Wick.Responsive.onBreakpoint(function () {
          destroySliders();
        }, 'only-md');
        Wick.Responsive.onBreakpoint(function () {
          destroySliders();
        }, 'up-lg');

        if (Wick.Responsive.getCurrentBreakpoint() === 'down-sm'){
          createSliders();
        }
      };

      $(document).ready(function () {
        $gallery.length && init();
      });
    })();
  </script>
  </body>
</html>
