{% extends "demo/module/module.html" %}
{% import "./carousel.html" as carousel %}

{% block content %}
    {% set demoImageSrc = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22500%22%20viewBox%3D%220%200%20900%20500%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F900x500%2Fauto%2F%23777%3A%23555%2Ftext%3AFirst%20slide%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_153d41fb26d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A45pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_153d41fb26d%22%3E%3Crect%20width%3D%22900%22%20height%3D%22500%22%20fill%3D%22%23777%22%2F%3E%3Cg%3E%3Ctext%20x%3D%22334.8984375%22%20y%3D%22270.7%22%3E900x500%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' %}

    <demo aria-label="Carousel with all controls (indicators and arrows)">
        {% call carousel.allControls() %}
            {{ carousel.imageItem('img 1', demoImageSrc) }}
            {{ carousel.imageItem('img 2', demoImageSrc) }}
            {{ carousel.imageItem('img 3', demoImageSrc) }}
        {% endcall %}
    </demo>

    <demo aria-label="Carousel with no controls">
        {% call carousel.noControls() %}
            {{ carousel.imageItem('img 1', demoImageSrc) }}
            {{ carousel.imageItem('img 2', demoImageSrc) }}
            {{ carousel.imageItem('img 3', demoImageSrc) }}
        {% endcall %}
    </demo>

    <demo aria-label="Carousel with indicators only">
        {% call carousel.indicatorsOnly() %}
            {{ carousel.imageItem('img 1', demoImageSrc) }}
            {{ carousel.imageItem('img 2', demoImageSrc) }}
            {{ carousel.imageItem('img 3', demoImageSrc) }}
        {% endcall %}
    </demo>

    <demo aria-label="Carousel with arrows only">
        {% call carousel.arrowsOnly() %}
            {{ carousel.imageItem('img 1', demoImageSrc) }}
            {{ carousel.imageItem('img 2', demoImageSrc) }}
            {{ carousel.imageItem('img 3', demoImageSrc) }}
        {% endcall %}
    </demo>

    <demo aria-label="Carousel with custom 2.5s interval and stop after last slide">
        {% call carousel.allControls(interval = 2500, wrap = false) %}
            {{ carousel.imageItem('img 1', demoImageSrc) }}
            {{ carousel.imageItem('img 2', demoImageSrc) }}
            {{ carousel.imageItem('img 3', demoImageSrc) }}
        {% endcall %}
    </demo>

    <demo aria-label="Carousel with custom items">
        {% call carousel.allControls() %}
            {% call carousel.item() %}
                <img alt="img 1" src="{{ demoImageSrc }}">
                <div class="carousel-caption">
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            {% endcall %}
            {% call carousel.item() %}
                <img alt="img 2" src="{{ demoImageSrc }}">
                <div class="carousel-caption">
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            {% endcall %}
            {% call carousel.item() %}
                <img alt="img 3" src="{{ demoImageSrc }}">
                <div class="carousel-caption">
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            {% endcall %}
        {% endcall %}
    </demo>

{% endblock %}