{% if page.jumbotron.slider %}
<div class="jumbotron jumbotron-fluid background_image slider {% if page.jumbotron.class %}{{page.jumbotron.class}}{% endif %}">
    <div id="jumbotron-slider" class="owl-carousel owl-theme full-width-slider">
        {% for slide in page.jumbotron.slider %}
        <div class="item d-flex align-items-center owl-slide {% if forloop.first %}active{% endif %}">
             {% if slide.image %}
                {% assign image_path = slide.image | remove_first: "/assets/images/" %}
                {% picture header_slider_image {{image_path}} %}
            {% endif %}
            <div class="container {% if page.jumbotron.inner_class %}{{page.jumbotron.inner_class}}{% endif %}">
                <div class="inner_content_wrapper">
                {% if slide.inner-image %}
                    <img class="img-responsive lazyload"
                        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                        data-src="{{slide.inner-image}}" alt="Slide {{forloop.index}} inner image" />
                {% endif %}
                {% if slide.title %}
                    <h1 class=" {% if slide.title-class %}{{slide.title-class}}{% endif %}">
                        {{slide.title}}</h1>
                {% endif %}
                {% if slide.description %}
                    <p class="lead {% if slide.desciption-class %}class="{{slide.description-class}}" {% endif %}>
                        {{slide.description}}
                    </p>
                {% endif %}
                {% if slide.buttons %}
                    <p class="lead">
                        {% for button in slide.buttons %}
                        <a href="{{button.url}}" class="btn btn-primary {% if button.class %}{{button.class}}{% endif %}">
                            {{button.title}} {% if button.icon %}<i class="{{button.icon}}"></i>{% endif %}
                        </a>
                        {% endfor %}
                    </p>
                {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% else %}
<div class="jumbotron d-flex align-items-center jumbotron-fluid {% if page.jumbotron.video %}video{% endif %}
{% if page.jumbotron.image %}background_image{% endif%} {% if page.jumbotron.class %}{{page.jumbotron.class}}{% endif %}">
    {% if page.jumbotron.image %}
        {% assign image_path = page.jumbotron.image | remove_first: "/assets/images/" %}
        {% picture header_image {{image_path}} %}

    {% endif %}
    {% if page.jumbotron.video %}
        <video autoplay muted preload="none" poster="{{page.jumbotron.video.poster}}" playsinline loop id="jumbotronVideo">
            {% if page.jumbotron.video.source.mp4 %}
            <source src="{{page.jumbotron.video.source.mp4}}" type="video/mp4">
            {% endif %}
            {% if page.jumbotron.video.source.ogg %}
            <source src="{{page.jumbotron.video.source.ogg}}" type="video/ogg">
            {% endif %}
            {% if page.jumbotron.video.source.webm %}
            <source src="{{page.jumbotron.video.source.webm}}" type="video/webm">
            {% endif %}
        </video>
    {% endif %}
    <div class="container {% if page.jumbotron.inner_class %}{{page.jumbotron.inner_class}}{% endif %}">
            <div class="inner_content_wrapper">
            <h1 class="">{{page.jumbotron.title}}</h1>
            {% if page.jumbotron.description %}
            <p class="lead">
                {{page.jumbotron.description }}
            </p>
            {% endif %}
            {% if page.jumbotron.buttons %}
            <p class="lead">
                {% for button in page.jumbotron.buttons %}
                    {% include flow/button.html object=button %}
                {% endfor %}
            </p>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}