<div class="sidebar">
  <ul class="main-menu">
    <%- partial('partials/main_menu', { context: 'sidebar' }) %>
  </ul>
</div>

<div id="hero">
  <div class="inner">
    <h1>
      A flexible, responsive, touch-friendly<br/> carousel for Vue.js
    </h1>
    <p>
      <a class="button" href="<%- url_for('/guide') %>">GET STARTED</a>
      <a class="button white" href="https://github.com/SSENSE/vue-carousel" target="_blank">GITHUB</a>
    </p>
  </div>
</div>

<div id="hero">
  <div class="inner">
    <div id="index-example"></div>
  </div>
</div>

<script type="text/javascript">
  var images = [
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg',
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176005_1.jpg',
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176003_1.jpg',
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176004_1.jpg',
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176002_1.jpg',
    'https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176001_1.jpg'
  ];
  var slideTpl = '';

  images.forEach(function(img) {
    slideTpl += '<slide><img style="width: 100%" src="' + img + '" /></slide>';
  });

  new Vue({
    el: '#index-example',
    components: {
      'carousel': VueCarousel.Carousel,
      'slide': VueCarousel.Slide
    },
    template: '<carousel paginationColor="#d5cfc6" paginationActiveColor="#913938" :perPageCustom="[[480, 3], [900, 4]]">' + slideTpl + '</carousel>'
  });
</script>

<div id="highlights">
  <div class="inner">
    <div class="point">
      <h2>Flexible</h2>
      <p>Slides use Vue's built-in slot system, allowing you to display any type of content in slides (including other Vue components!)</p>
    </div>

    <div class="point">
      <h2>Responsive</h2>
      <p>Breakpoints in Vue Carousel can be configured to have different slide counts depending on the device's display resolution.</p>
    </div>

    <div class="point">
      <h2>Touch-friendly</h2>
      <p>
        Touch and drag supported on both desktop and mobile devices.
      </p>
    </div>
  </div>
</div>

<div id="sponsors">
  <div class="inner">
    <h3>SPONSORED BY</h3>
    <%- partial('partials/sponsors') %>
    <br>
    <a class="become-sponsor button white" href="https://www.ssense.com/careers">We're Hiring!</a>
    <a class="become-sponsor button white" href="https://github.com/SSENSE/vue-carousel/issues">Contribute</a>
  </div>
</div>

<div id="footer">
  Released under the <a href="https://opensource.org/licenses/MIT" href="_blank">MIT License</a><br>
  Copyright &copy; <%- new Date().getFullYear() %> SSENSE
</div>

<script>
var topScrolled = false
window.addEventListener('scroll', function () {
  if (window.pageYOffset > 165 && !topScrolled) {
    topScrolled = true
    document.getElementById('mobile-bar').classList.remove('top')
  } else if (window.pageYOffset <= 165 && topScrolled) {
    topScrolled = false
    document.getElementById('mobile-bar').classList.add('top')
  }
})
</script>
