description = "Portfolio 5 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_portfolio5_id %}id="{{ data.section_portfolio5_id }}"{% endif %} class="portfolio5 py-24 {{ data.section_portfolio5_bg }}">
    <div class="{{ data.section_portfolio5_container }}">
        <!-- Row  -->
        {% if data.section_portfolio5_header or data.section_portfolio5_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_portfolio5_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_portfolio5_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="owl-carousel owl-theme portfolio5-carousel-{{ data.section_portfolio5_id }}">
            {% set aos1 = ['flip-left', 'flip-up', 'flip-right'] %}
            {% set aos2 = ['fade-right', 'fade-up', 'fade-left'] %}
            {% for fields in data.section_portfolio5 %}
            <!-- item -->
            <div class="item" {% if data.section_portfolio5_animation %}data-aos="{{ aos2[ loop.index0 % 3 ] }}"{% endif %}>
                <div class="card border-0 overflow-hidden my-7 rounded-{{ data.section_portfolio5_radius }} {{ data.section_portfolio5_shadow }}" {% if data.section_portfolio5_animation %}data-aos="{{ aos1[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                    {% if data.section_portfolio5_lightbox %}
                    <a class="swipebox img-hover" caption="<b class='text-white display-11'>{{ fields.section_portfolio5_title }}</b><br><em class='text-light'>{{ fields.section_portfolio5_desc }}</em>" href="
                    {% if fields.section_portfolio5_type == 'image' %}
                    {{ fields.section_portfolio5_image|media }}
                    {% else %}
                    {{ fields.section_portfolio5_video }}
                    {% endif %}
                    ">
                    {% endif %}
                        <img class="rounded-{{ data.section_portfolio4_radius }}" src="{{ fields.section_portfolio5_image|media|resize(550, (data.section_portfolio5_height), { mode: 'crop' }) }}" alt="{{ fields.section_portfolio5_title }}" />
                    {% if data.section_portfolio5_lightbox %}</a>{% endif %}
                    <div class="card-body position-relative">
                        {% if fields.section_portfolio5_link is not empty %}
                        <a href="{{ fields.section_portfolio5_clink ? fields.section_portfolio5_clink : (fields.section_portfolio5_plink | staticPage) }}" class="d-flex justify-content-center align-items-center position-absolute pos-t-5n pos-r-5 rounded-circle w-10r h-10r p-0 btn btn-danger"><i class="fa fa-link"></i></a>
                        {% endif %}
                        <h5 class="font-weight-medium">
                            {% if fields.section_portfolio5_link is empty %}
                            {{ fields.section_portfolio5_title }}
                            {% else %}
                            <a href="{{ fields.section_portfolio5_clink ? fields.section_portfolio5_clink : (fields.section_portfolio5_plink | staticPage) }}" class="text-link">{{ fields.section_portfolio5_title }}
                            </a>
                            {% endif %}
                        </h5>
                        {% if fields.section_portfolio5_desc %}<p class="mb-1 display-13">{{ fields.section_portfolio5_desc }}</p>{% endif %}
                        {% if fields.section_portfolio5_extra %}<small class="text-muted">{{ fields.section_portfolio5_extra }}</small>{% endif %}
                    </div>
                </div>
            </div>
            <!-- item -->
            {% endfor %}
        </div>
    </div>
</div>

{% set col_xl = data.section_portfolio5_column %}
{% if col_xl == 1 %}{% set col_l = 1 %}{% set col_m = 1 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 2 %}{% set col_l = 2 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 3 %}{% set col_l = 3 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 4 %}{% set col_l = 3 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 6 %}{% set col_l = 4 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}

{% put scripts %}
<script>
//Carousel
$('.portfolio5-carousel-{{ data.section_portfolio5_id }}').owlCarousel({
	loop: true,
	margin: {{ data.section_portfolio5_gap }},
	center: true,
	nav: false,
	dots: false,
	autoplay: {{ data.section_portfolio5_autoplay }},
	lazyLoad:true,
	responsiveClass: true,
	responsive: {
		0: {
			items: {{ col_s }}
		},
		768: {
			items: {{ col_m }}
		},
		1170: {
			items: {{ col_l }}
		},
		1800: {
			items: {{ col_xl }}
		}
	}
});
{% if data.section_portfolio5_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 %}