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

<!-- Portfolio Modals-->
{% from "includes/actions.twig" import actions %}
{% from "includes/video.twig" import video %}
{% for portfolio_item in portfolio_items %}
    <!--{{ " Portfolio Modal  " ~ loop.index ~ " " }}-->
    <div class="portfolio-modal modal fade" id="portfolioModal{{ loop.index }}" tabindex="-1" aria-labelledby="portfolioModal{{ loop.index }}" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body text-center pb-5">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <!-- Portfolio Modal - Title-->
                                <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">{{ portfolio_item.meta.title ? portfolio_item.meta.title : portfolio_item.id }}</h2>
                                <!-- Icon Divider-->
                                <div class="divider-custom">
                                    <div class="divider-custom-line"></div>
                                    <div class="divider-custom-icon"><i class="fas fa-{{portfolio_item.meta.divider ? portfolio_item.meta.divider : 'star' }}"></i></div>
                                    <div class="divider-custom-line"></div>
                                </div>
                                {% if portfolio_item.meta.video %}
                                    <!-- Portfolio Modal - Video-->
                                    {{ video(portfolio_item.meta.video, portfolio_item.meta.image, "portfolio_modal", loop.index) }}
                                {% elseif portfolio_item.meta.image %}
                                    <!-- Portfolio Modal - Image-->
                                    <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ portfolio_item.meta.image|url }}" alt="{{ portfolio_item.meta.image_alt }}" />
                                {% endif %}
                                <!-- Portfolio Modal - Text-->
                                {{ portfolio_item.meta.demo_content ? portfolio_item.meta.demo_content|markdown : portfolio_item.id|content }}
                                {{ actions(portfolio_item.meta.actions, "portfolio", index.portfolio.disable_close_buttons ? false : true) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}