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

<div id="hero">
    <div class="inner">
        <h1>
            Beautiful, flexible and touch supported <br/> <strong>3D Carousel for Vue.js</strong>
        </h1>
        <p>
            <a class="button" href="<%- url_for('/guide') %>">GET STARTED</a>
            <a class="button white" href="https://github.com/wlada/vue-carousel-3d" target="_blank">GITHUB</a>
        </p>
    </div>
</div>

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

<script type="text/javascript">
    var slides = [
        {
            title: 'Slide 1',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 2',
            desc: 'Lorem ipsum dolor sit amet ',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 3',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 4',
            desc: 'Lorem ipsum dolor sit amet,  Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 5',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 6',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 7',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 8',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 9',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        },
        {
            title: 'Slide 10',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
            src: 'https://placehold.it/360x270'
        }
    ]

    var slideTpl = '';

    slides.forEach(function (slide, index) {
        slideTpl += '<slide :index="' + index + '"><img src="' + slide.src + '" /></slide>';
    });

    new Vue({
        el: '#index-example',
        components: {
            'carousel-3d': window['carousel-3d'].Carousel3d,
            'slide': window['carousel-3d'].Slide
        },
        template: '<carousel-3d :controls-visible="true">' + slideTpl + '</carousel-3d>'
    });
</script>

<div id="highlights">
    <div class="inner">
        <div class="point">
            <h2>Beautiful</h2>
            <p>With CSS transition you will get nice and smooth slide transition in 3D effect </p>
        </div>

        <div class="point">
            <h2>Flexible</h2>
            <p>Inside slides you can display any html content or some other Vue component</p>
        </div>

        <div class="point">
            <h2>Touch supported</h2>
            <p></p>
            <p>Touch support enabled on mobile devices</p>
        </div>
    </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() %> <a href="http://vladimirbujanovic.com/">Vladimir Bujanovic</a>
</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>
