description = "Portfolio 3 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_portfolio3_id %}id="{{ data.section_portfolio3_id }}"{% endif %} class="portfolio3 py-24 {{ data.section_portfolio3_bg }}">
    <div class="{{ data.section_portfolio3_container }}">
        <!-- Row  -->
        {% if data.section_portfolio3_header or data.section_portfolio3_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_portfolio3_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_portfolio3_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="{{ data.section_portfolio3_align ? 'align-content-center' : 'd-lg-flex align-items-center'}} mb-10">
            {% if data.section_portfolio3_categories %}
            <div class="controls mb-7 mb-lg-0 {{ data.section_portfolio3_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_portfolio3 %}
                {% for tags in fields.section_portfolio3_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_portfolio3_search %}
                <div class="portfolio-search {{ data.section_portfolio3_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_portfolio3_sort %}
                <div class="portfolio-sort {{ data.section_portfolio3_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_portfolio3 %}
            <!-- Column -->
            {% set gap_1 = data.section_portfolio3_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_portfolio3_column }} px-{{ gap_1 }} portfolio-item" 
            data-groups='[
            {% for tags in fields.section_portfolio3_category %}
            "{{ tags|slug }}"{% if not loop.last %},{% endif %}
            {% endfor %}
            ]'
            data-date-created="{{ fields.section_portfolio3_date|date('Y-m-d') }}" data-title="{{ fields.section_portfolio3_title }}">
                <div class="card border-0 mb-{{ gap_2 }} rounded-{{ data.section_portfolio3_radius }}" {% if data.section_portfolio3_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200" data-aos-once="true"{% endif %}>
                    <div class="rounded-{{ data.section_portfolio3_radius }} {{ data.section_portfolio3_shadow }}">
                        <div class="img-hover position-relative rounded-top-{{ data.section_portfolio3_radius }}">
                            <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_portfolio3_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_portfolio3_title }}</b><br><em class='text-light'>{{ fields.section_portfolio3_desc }}</em>" href="
                                        {% if fields.section_portfolio3_type == 'image' %}
                                        {{ fields.section_portfolio3_image|media }}
                                        {% else %}
                                        {{ fields.section_portfolio3_video }}
                                        {% endif %}
                                    ">
                                    {% if fields.section_portfolio3_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                    </a>
                                    {% endif %}
                                    {% if fields.section_portfolio3_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_portfolio3_clink ? fields.section_portfolio3_clink : (fields.section_portfolio3_plink | staticPage) }}">
                                        <i class="fas fa-link"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                            <img class="card-img-top rounded-top-{{ data.section_portfolio3_radius }}" alt="{{ fields.section_portfolio3_title }}" src="{{ fields.section_portfolio3_image|media|resize(550, (fields.section_portfolio3_height), { mode: 'crop' }) }}"/>
                        </div>
                        <div class="card-body position-relative">
                            <h5 class="portfolio-title font-weight-medium">{{ fields.section_portfolio3_title }}</h5>
                            {% if fields.section_portfolio3_desc %}<p class="portfolio-desc mb-1 display-13">{{ fields.section_portfolio3_desc }}</p>{% endif %}
                            {% if fields.section_portfolio3_extra %}<small class="text-muted">{{ fields.section_portfolio3_extra }}</small>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_portfolio3_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 %}