{% import '@leviy-templates/macros/tour.html.twig' as tour %}
{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{% set slide1 %}
    <div class="slide-container d-flex flex-column">
        <div class="text">
            <h1><i class="material-icons-round">code</i> Use custom HTML</h1>
            <p>
                Custom HTML can be used as content for these slides.<br />
                <br />
                <img src="https://picsum.photos/600/200"/>
            </p>
        </div>
        <div class="caption d-flex align-items-center">
            <div class="text-center">
                <h1>Welcome to the tour</h1>
                <p>
                    We believe that implementing a tour should be easy and effortless, so you can focus on what is really
                    important.
                </p>
            </div>
        </div>
    </div>
{% endset %}

{% set slide2 %}
    <div class="slide-container d-flex flex-column">
        <div class="image">
            <img src="https://picsum.photos/600/450"/>
        </div>
        <div class="caption d-flex align-items-center">
            <div class="caption-icon">
                <i class="material-icons-round">thumb_up_alt</i>
            </div>
            <div class="caption-text">
                <p>
                    Use the <code>.caption</code> class for a nice footer element with a <code>.caption-icon</code>
                    and a <code>.caption-text</code>.
                </p>
            </div>
        </div>
    </div>
{% endset %}

{% set showOnLoad = false %}
{{ tour.tour('tourId', [slide1, slide2], showOnLoad) }}

{{ buttons.button('Example tour', 'outline-dark', 'button', false, {
    'target': '#tourId',
    'toggle': 'modal'
}) }}