description = "Portfolio 2 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_portfolio2_id %}id="{{ data.section_portfolio2_id }}"{% endif %} class="portfolio2 py-24 {{ data.section_portfolio2_bg }}">
    <div class="{{ data.section_portfolio2_container }}">
        <!-- Row  -->
        {% if data.section_portfolio2_header or data.section_portfolio2_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_portfolio2_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_portfolio2_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="{{ data.section_portfolio2_align ? 'align-content-center' : 'd-lg-flex align-items-center'}} mb-10">
            {% if data.section_portfolio2_categories %}
            <div class="controls mb-7 mb-lg-0 {{ data.section_portfolio2_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_portfolio2 %}
                {% for tags in fields.section_portfolio2_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_portfolio2_search %}
                <div class="portfolio-search {{ data.section_portfolio2_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_portfolio2_sort %}
                <div class="portfolio-sort {{ data.section_portfolio2_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_portfolio2 %}
            <!-- Column -->
            {% set gap_1 = data.section_portfolio2_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_portfolio2_column }} px-{{ gap_1 }} portfolio-item"  
            data-groups='[
            {% for tags in fields.section_portfolio2_category %}
            "{{ tags|slug }}"{% if not loop.last %},{% endif %}
            {% endfor %}
            ]'
            data-date-created="{{ fields.section_portfolio2_date|date('Y-m-d') }}" data-title="{{ fields.section_portfolio2_title }}">
                <div class="card border-0 mb-{{ gap_2 }} rounded-{{ data.section_portfolio2_radius }}" {% if data.section_portfolio2_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200" data-aos-once="true"{% endif %}>
                    <div class="rounded-{{ data.section_portfolio2_radius }} {{ data.section_portfolio2_shadow }}">
                        {% if data.section_portfolio2_lightbox %}
                        <a class="swipebox" caption="<b class='text-white display-11'>{{ fields.section_portfolio2_title }}</b><br><em class='text-light'>{{ fields.section_portfolio2_desc }}</em>" href="
                        {% if fields.section_portfolio2_type == 'image' %}
                        {{ fields.section_portfolio2_image|media }}
                        {% else %}
                        {{ fields.section_portfolio2_video }}
                        {% endif %}
                        ">
                        {% endif %}
                            <div class="rounded-top-{{ data.section_portfolio2_radius }} img-hover">
                                <img class="card-img-top rounded-top-{{ data.section_portfolio2_radius }}" alt="{{ fields.section_portfolio2_title }}" src="{{ fields.section_portfolio2_image|media|resize(550, (fields.section_portfolio2_height), { mode: 'crop' }) }}"/>
                            </div>    
                        {% if data.section_portfolio2_lightbox %}</a>{% endif %}
                        <div class="card-body position-relative">
                            {% if fields.section_portfolio2_link is not empty %}
                            <a href="{{ fields.section_portfolio2_clink ? fields.section_portfolio2_clink : (fields.section_portfolio2_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="portfolio-title font-weight-medium">{{ fields.section_portfolio2_title }}</h5>
                            {% if fields.section_portfolio2_desc %}<p class="portfolio-desc mb-1 display-13">{{ fields.section_portfolio2_desc }}</p>{% endif %}
                            {% if fields.section_portfolio2_extra %}<small class="text-muted">{{ fields.section_portfolio2_extra }}</small>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

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