description = "Portfolio 4 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addJs('assets/vendor/shuffle/shuffle.min.js');
    $this->addJs('assets/vendor/shuffle/app.js');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
<div {% if data.section_portfolio4_id %}id="{{ data.section_portfolio4_id }}"{% endif %} class="portfolio4 py-24 {{ data.section_portfolio4_bg }}">
    <div class="{{ data.section_portfolio4_container }}">
        <!-- Row  -->
        {% if data.section_portfolio4_header or data.section_portfolio4_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_portfolio4_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_portfolio4_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="{{ data.section_portfolio4_align ? 'align-content-center' : 'd-lg-flex align-items-center'}} mb-10">
            {% if data.section_portfolio4_categories %}
            <div class="controls mb-7 mb-lg-0 {{ data.section_portfolio4_align ? 'text-center mb-7' : ''}}">
                <a class="filter display-11 text-link p-2 active" data-group="all" href="#!">All</a>
                {% set existingIds = [] %}
                {% for fields in data.section_portfolio4 %}
                {% for tags in fields.section_portfolio4_category %}
                {% if tags not in existingIds %}
                <a class="filter display-11 text-link p-2" data-group="{{ tags|slug }}" href="#!">{{ tags }}</a>
                {% set existingIds = existingIds|merge([tags]) %}
                {% endif %}
                {% endfor %}
                {% endfor %}
            </div>
            {% endif %}
            <div class="d-flex ml-auto justify-content-between">
                {% if data.section_portfolio4_search %}
                <div class="portfolio-search {{ data.section_portfolio4_align ? '' : 'ml-0 ml-lg-5'}}">
                    <input class="form-control border-2 hover-border-default search-option" type="search" id="search-input" placeholder="Search">
                </div>
                {% endif %}
                {% if data.section_portfolio4_sort %}
                <div class="portfolio-sort {{ data.section_portfolio4_align ? '' : 'ml-0 ml-lg-5'}}">
                    <select class="form-control border-2 hover-border-default sort-options">
                      <option selected="selected" value="">Default</option>
                      <option value="title">Title</option>
                      <option value="date-created">Date Created</option>
                    </select>
                </div>
                {% else %}
                <div class="sort-options"></div>
                {% endif %}
            </div>
        </div>
        <div id="portfolio" class="row overflow-visible">
            {% set aos = ['fade-right', 'fade-down', 'fade-left', 'fade-right', 'fade-up', 'fade-left'] %}
            {% for fields in data.section_portfolio4 %}
            <!-- Column -->
            {% set gap_1 = data.section_portfolio4_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_portfolio4_column }} px-{{ gap_1 }} portfolio-item" 
            data-groups='[
            {% for tags in fields.section_portfolio4_category %}
            "{{ tags|slug }}"{% if not loop.last %},{% endif %}
            {% endfor %}
            ]'
            data-date-created="{{ fields.section_portfolio4_date|date('Y-m-d') }}" data-title="{{ fields.section_portfolio4_title }}">
                <div class="card border-0 mb-{{ gap_2 }} rounded-{{ data.section_portfolio4_radius }}" {% if data.section_portfolio4_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200" data-aos-once="true"{% endif %}>
                    <div class="img-hover position-relative rounded-{{ data.section_portfolio4_radius }} {{ data.section_portfolio4_shadow }}">
                        <div class="portfolio-overlay position-absolute pos-0 bg-black-50 opacity-0 z-10 transition-40 overflow-hidden w-100 h-100">
                            <div class="h-100 d-flex justify-content-center align-items-center">
                                {% if data.section_portfolio4_lightbox %}
                                <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light swipebox" caption="<b class='text-white display-11'>{{ fields.section_portfolio4_title }}</b><br><em class='text-light'>{{ fields.section_portfolio4_desc }}</em>" href="
                                {% if fields.section_portfolio4_type == 'image' %}
                                {{ fields.section_portfolio4_image|media }}
                                {% else %}
                                {{ fields.section_portfolio4_video }}
                                {% endif %}
                                ">
                                {% if fields.section_portfolio4_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                </a>
                                {% endif %}
                                {% if fields.section_portfolio4_link is not empty %}
                                <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light ml-4" href="{{ fields.section_portfolio4_clink ? fields.section_portfolio4_clink : (fields.section_portfolio4_plink | staticPage) }}">
                                    <i class="fas fa-link"></i>
                                </a>
                                {% endif %}
                                <div class="port-hover-info position-absolute pos-x-0 pos-b-0 p-4 opacity-0 transition-40 w-75">
                                    <h5 class="portfolio-title font-weight-medium mb-0 text-white">{{ fields.section_portfolio4_title }}</h5>
                                    {% if fields.section_portfolio4_desc %}<p class="portfolio-desc display-13 line-height-tight text-white opacity-50 d-none d-lg-block mb-0">{{ fields.section_portfolio4_desc }}</p>{% endif %}
                                    {% if fields.section_portfolio4_extra %}<small class="text-white opacity-75">{{ fields.section_portfolio4_extra }}</small>{% endif %}
                                </div>
                            </div>
                        </div>
                        <img class="card-img-top rounded-{{ data.section_portfolio4_radius }}" alt="{{ fields.section_portfolio4_title }}" src="{{ fields.section_portfolio4_image|media|resize(550, (fields.section_portfolio4_height), { mode: 'crop' }) }}"/>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_portfolio4_lightbox %}
{% put scripts %}
<script>
;( 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 );
</script>
{% endput %}
{% endif %}