description = "Portfolio 1 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addJs('assets/vendor/shuffle/shuffle.min.js');
    $this->addJs('assets/vendor/shuffle/app.js');
}
?>
==
<div {% if data.section_portfolio1_id %}id="{{ data.section_portfolio1_id }}"{% endif %} class="portfolio1 py-24 {{ data.section_portfolio1_bg }}">
    <div class="{{ data.section_portfolio1_container }}">
        <!-- Row  -->
        {% if data.section_portfolio1_header or data.section_portfolio1_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_portfolio1_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_portfolio1_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="{{ data.section_portfolio1_align ? 'align-content-center' : 'd-lg-flex align-items-center'}} mb-10">
            {% if data.section_portfolio1_categories %}
            <div class="controls mb-7 mb-lg-0 {{ data.section_portfolio1_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_portfolio1 %}
                {% for tags in fields.section_portfolio1_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_portfolio1_search %}
                <div class="portfolio-search {{ data.section_portfolio1_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_portfolio1_sort %}
                <div class="portfolio-sort {{ data.section_portfolio1_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_portfolio1 %}
            <!-- Column -->
            {% set gap_1 = data.section_portfolio1_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_portfolio1_column }} px-{{ gap_1 }} portfolio-item" 
            data-groups='[
            {% for tags in fields.section_portfolio1_category %}
            "{{ tags|slug }}"{% if not loop.last %},{% endif %}
            {% endfor %}
            ]'
            data-date-created="{{ fields.section_portfolio1_date|date('Y-m-d') }}" data-title="{{ fields.section_portfolio1_title }}">
                <div class="card border-0 rounded-{{ data.section_portfolio1_radius }} mb-{{ gap_2 }}" {% if data.section_portfolio1_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200" data-aos-once="true"{% endif %}>
                    <div class="rounded-{{ data.section_portfolio1_radius }} {{ data.section_portfolio1_shadow }}">
                        {% if fields.section_portfolio1_type == 'image' %}
                        {% if fields.section_portfolio1_images|length <= 1  %}
                        {% for images in fields.section_portfolio1_images %}
                        <img class="card-img-top rounded-top-{{ data.section_portfolio1_radius }}" src="{{ images.section_portfolio1_image|media|resize(550, (fields.section_portfolio1_height), { mode: 'crop' }) }}" alt="{{ fields.section_portfolio1_title }}" />
                        {% endfor %}
                        {% else %}
                        <div id="portfolio1Carousel-{{ data.section_portfolio1_id }}-{{ fields.section_portfolio1_title|slug }}" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                {% for images in fields.section_portfolio1_images %}
                                <li data-target="#portfolio1Carousel-{{ data.section_portfolio1_id }}-{{ fields.section_portfolio1_title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
                                {% endfor %}
                            </ol>
                            <div class="carousel-inner rounded-top-{{ data.section_portfolio1_radius }}" role="listbox">
                                {% for images in fields.section_portfolio1_images %}
                                <div class="carousel-item {% if loop.first %}active{% endif %}">
                                    <img src="{{ images.section_portfolio1_image|media|resize(550, (fields.section_portfolio1_height), { mode: 'crop' }) }}" class="d-block w-100" alt="{{ fields.section_portfolio1_title }}">
                                </div>
                                {% endfor %}
                            </div>
                            <a class="carousel-control-prev" href="#portfolio1Carousel-{{ data.section_portfolio1_id }}-{{ fields.section_portfolio1_title|slug }}" role="button" data-slide="prev">
                                <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#portfolio1Carousel-{{ data.section_portfolio1_id }}-{{ fields.section_portfolio1_title|slug }}" role="button" data-slide="next">
                                <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                        {% endif %}
                        {% elseif fields.section_portfolio1_type == 'video' %}
                        <div class="embed-responsive embed-responsive-16by9 rounded-top-{{ data.section_portfolio1_radius }}" style="height:{{ fields.section_portfolio1_height }}px;">
                            <iframe class="embed-responsive-item" width="550" height="400" src="https://www.youtube.com/embed/{{ fields.section_portfolio1_video }}" frameborder="0" allowfullscreen></iframe>
                        </div>
                        {% endif %}
                        <div class="card-body position-relative">
                            {% if fields.section_portfolio1_link is not empty %}
                            <a href="{{ fields.section_portfolio1_clink ? fields.section_portfolio1_clink : (fields.section_portfolio1_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_portfolio1_title }}</h5>
                            {% if fields.section_portfolio1_desc %}<p class="portfolio-desc mb-1 display-13">{{ fields.section_portfolio1_desc }}</p>{% endif %}
                            {% if fields.section_portfolio1_extra %}<small class="text-muted">{{ fields.section_portfolio1_extra }}</small>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>