{# SPDX-License-Identifier: EUPL-1.2 #}

{% from "includes/video.twig" import video %}
<!-- Portfolio Section-->
<section class="page-section portfolio" id="portfolio">
    <div class="container">
        <!-- Portfolio Section Heading-->
        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">{{ index.portfolio.title ? index.portfolio.title : "Portfolio" }}</h2>
        <!-- Icon Divider-->
        <div class="divider-custom">
            <div class="divider-custom-line"></div>
            <div class="divider-custom-icon"><i class="fas fa-{{ index.portfolio.divider ? index.portfolio.divider : 'star' }}"></i></div>
            <div class="divider-custom-line"></div>
        </div>
        <!-- Portfolio Grid Items-->
        <div class="row justify-content-center">
            {% for portfolio_item in portfolio_items %}
            {% set classes = ["col-md-6", "col-lg-4"] %}
                {% if not loop.last %}
                    {% set classes = classes|merge(["mb-5"]) %}
                    {% if loop.revindex <= (loop.length - 1) % 3 + 1 %}
                        {% if loop.revindex == 3 %}
                            {% set classes = classes|merge(["mb-lg-0"]) %}
                        {% elseif loop.revindex == 2 %}
                            {% if loop.index == 2 %}
                                {% set classes = classes|merge(["mb-lg-0"]) %}
                            {% else %}
                                {% set classes = classes|merge(["mb-md-0"]) %}
                            {% endif %}
                        {% endif %}
                    {% elseif loop.revindex == 2 and loop.index == 3 %}
                        {% set classes = classes|merge(["mb-md-0","mb-lg-5"]) %}
                    {% endif %}
                {% endif %}

            <!-- {{ " Portfolio Item  " ~ loop.index ~ " " }} -->
            <div class="{{ classes|join(" ") }}">
                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal{{ loop.index }}">
                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                    </div>
                    {% if portfolio_item.meta.thumbnail_video %}
                        {{ video(portfolio_item.meta.video, portfolio_item.meta.thumbnail|url ?: portfolio_item.meta.image|url, "portfolio") }}
                    {% else %}
                        <img class="img-fluid d-block mx-auto" src="{{ portfolio_item.meta.thumbnail ? portfolio_item.meta.thumbnail|url : portfolio_item.meta.image ? portfolio_item.meta.image|url : random(config.theme_config.demo.portfolio_items).meta.image|url }}" alt="{{ portfolio_item.meta.thumbnail_alt ? portfolio_item.meta.thumbnail_alt : portfolio_item.meta.title }}" />
                    {% endif %}

                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>