description = "Features 19 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/owl-carousel/css/owl.carousel.min.css');
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addCss('assets/vendor/owl-carousel/css/owl.theme.default.min.css');
    $this->addJs('assets/vendor/owl-carousel/js/owl.carousel.min.js');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
<div {% if data.section_features19_id %}id="{{ data.section_features19_id }}"{% endif %} class="features19 py-24 {{ data.section_features19_bg }}">
    <div class="{{ data.section_features19_container }}">
        <!-- Row  -->
        {% if data.section_features19_header or data.section_features19_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_features19_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_features19_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <!-- Row  -->
        <div class="row align-items-center">
            {% set size_1 = data.section_features19_size %}
            {% set size_2 = 12 - size_1 %}
            <div class="col-lg-{{ size_2 }} {% if data.section_features19_position == 'order-1' %}order-2{% else %}order-1{% endif %}">
                <div class="card border-0 bg-transparent mb-7 max-w-sm {% if data.section_features19_position == 'order-1' %}float-left{% else %}float-right{% endif %}">
                    <div class="card-body">
                        <h2 class="pt-5 pb-4 text-uppercase">{{ data.section_features19_title }}</h2>
                        <p class="mt-7">{{ data.section_features19_desc }}</p>
                        {% if data.section_features19_btn_link is not empty %}
                        <a class="btn btn-default btn-chevron btn-lg mt-5" href="{{ data.section_features19_btn_clink ? data.section_features19_btn_clink : (data.section_features19_btn_plink | staticPage) }}">
                            <span>{{ data.section_features19_btn_label }} <i class="{{ data.section_features19_btn_icon }}"></i></span>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-lg-{{ size_1 }} {{ data.section_features19_position }}">
                <div class="owl-carousel owl-theme features19-carousel{{ data.section_features19_id }}">
                    {% set aos1 = ['flip-left', 'flip-up', 'flip-right'] %}
                    {% set aos2 = ['fade-right', 'fade-up', 'fade-left'] %}
                    {% for fields in data.section_features19 %}
                    <!-- item -->
                    <div class="item overflow-hidden" {% if data.section_features19_animation %}data-aos="{{ aos2[ loop.index0 % 3 ] }}"{% endif %}>
                        <div class="" {% if data.section_features19_animation %}data-aos="{{ aos1[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                            <a href="{{ fields.section_features19_image|media }}" class="{{ data.section_features19_lightbox ? 'swipebox' }} img-hover" caption="<b class='text-white display-11'>{{ fields.section_features19_image_title }}</b><br><em class='text-light'>{{ fields.section_features19_image_desc }}</em>">
                                <img src="{{ fields.section_features19_image|media|resize(450, 500, { mode: 'crop' }) }}" alt="{{ fields.section_features19_image_title}}" class="img-fluid" />
                                <div class="position-absolute pos-0 bg-black-50 overflow-hidden w-100 h-100"></div>
                                <div class="position-absolute p-7 pos-b-0">
                                    <h4 class="text-white">
                                        {% if fields.section_features19_image_link is empty %}
                                        {{ fields.section_features19_image_title }}
                                        {% else %}
                                        <a href="{{ fields.section_features19_image_clink ? fields.section_features19_image_clink : (fields.section_features19_image_plink | staticPage) }}" class="text-white hover-text-default">{{ fields.section_features19_image_title }}<i class="fa fa-chevron-right ml-3"></i></a>
                                        {% endif %}
                                    </h4>
                                    <p class="text-white mb-0">{{ fields.section_features19_image_desc}}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- item -->
                    {% endfor %}
                </div>
            </div>
        </div>
        <!-- Row  -->
    </div>
</div>

{% put scripts %}
<script>
//Carousel
$('.features19-carousel{{ data.section_features19_id }}').owlCarousel({
	loop: true,
	margin: 30,
	nav: false,
	dots: false,
	autoplay: {{ data.section_features19_autoplay ? 'true' : 'false' }},
	lazyLoad:true,
	responsiveClass: true,
	responsive: {
		0: {
			items: 1
		},
		768: {
			items: 2
		},
		1170: {
			items: 2
		},
		1800: {
			items: 3
		}
	}
});
{% if data.section_features19_lightbox %}
;( function( $ ) {
    $( '.swipebox' ).swipebox( {
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 5000, // delay before hiding bars on desktop
		videoMaxWidth : 1600 // videos max width
    } );
} )( jQuery );
{% endif %}
</script>
{% endput %}