{% extends 'base.html.twig' %}
    {% set newLang = getNewsLangs({'News': new, 'lang': app.request.locale}) %}

{% block metaTitle %}{{ newLang.metaTitle|default }}{% endblock %}
{% block metaDescription %}{{ newLang.metaDescription|default }}{% endblock %}
{% block stylesheets %}

    <style>
        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

{% endblock %}
{% block body %}
    <div class="root_div">
        <div class="root_container">
            <div class="root_header news_detail_header_root">
                <div class="news_detail_header">
                    <div class="news_detail_header_write">

                        <h5><a href="{{ path('app_main_default') }}">{{ "pages.news-detail.detail-home"|trans|upper }}</a><span> > </span><a href="{{ path('app_main_news') }}">{{ "pages.news-detail.detail-news"|trans|upper }}</a><span> > </span><span>{{ newLang.title|default }}</span></h5>
                        <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ newLang.title|default }}</h2>
                    </div>
                    <div class="news_detail_header_info">
                        <span>{{ "pages.news-detail.detail-date"|trans|upper }}</span>
                        <p>{{ new.createdAt|dateString_dayAndMonthAndYear }}</p>
                        <span>{{ "pages.news-detail.detail-share"|trans|upper }}</span>
                        <div class="news_detail_header_info_social">
                            {% set shareTitle = newLang.title|default %}
                            {% set shareUrl = newLang.title|default %}
                            <a href="javascript:void(0);" onclick="shareOnCopy()">
                                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="#153B5F" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="#153B5F" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                            </a>
                            <a href="javascript:void(0);" onclick="shareOnYouTube()">
                                <svg fill="#153B5F" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                     viewBox="-143 145 512 512" xml:space="preserve">
                                    <g>
                                        <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z
                                             M339,617c0,5.5-4.5,10-10,10h-432c-5.5,0-10-4.5-10-10V185c0-5.5,4.5-10,10-10h432c5.5,0,10,4.5,10,10V617z"/>
                                        <path d="M196.9,311.2H29.1c0,0-44.1,0-44.1,44.1v91.5c0,0,0,44.1,44.1,44.1h167.8c0,0,44.1,0,44.1-44.1v-91.5
                                            C241,355.3,241,311.2,196.9,311.2z M78.9,450.3v-98.5l83.8,49.3L78.9,450.3z"/>
                                    </g>
                                </svg>
                            </a>
                            <a href="javascript:void(0);" onclick="shareOnInstagram()">
                                <svg fill="#153B5F" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                     viewBox="-143 145 512 512" xml:space="preserve">
                                    <g>
                                        <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z
                                             M339,617c0,5.5-4.5,10-10,10h-432c-5.5,0-10-4.5-10-10V185c0-5.5,4.5-10,10-10h432c5.5,0,10,4.5,10,10V617z"/>
                                        <path d="M191.6,273h-157c-27.3,0-49.5,22.2-49.5,49.5v52.3v104.8c0,27.3,22.2,49.5,49.5,49.5h157c27.3,0,49.5-22.2,49.5-49.5V374.7
                                            v-52.3C241,295.2,218.8,273,191.6,273z M205.8,302.5h5.7v5.6v37.8l-43.3,0.1l-0.1-43.4L205.8,302.5z M76.5,374.7
                                            c8.2-11.3,21.5-18.8,36.5-18.8s28.3,7.4,36.5,18.8c5.4,7.4,8.5,16.5,8.5,26.3c0,24.8-20.2,45.1-45.1,45.1C88,446.1,68,425.8,68,401
                                            C68,391.2,71.2,382.1,76.5,374.7z M216.1,479.5c0,13.5-11,24.5-24.5,24.5h-157c-13.5,0-24.5-11-24.5-24.5V374.7h38.2
                                            c-3.3,8.1-5.2,17-5.2,26.3c0,38.6,31.4,70,70,70c38.6,0,70-31.4,70-70c0-9.3-1.9-18.2-5.2-26.3h38.2V479.5z"/>
                                    </g>
                                </svg>
                            </a>
                            <a href="javascript:void(0);" onclick="shareOnLinkedIn()">
                                <svg fill="#153B5F" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                     viewBox="-143 145 512 512" xml:space="preserve">
                                    <g>
                                        <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z
                                             M339,617c0,5.5-4.5,10-10,10h-432c-5.5,0-10-4.5-10-10V185c0-5.5,4.5-10,10-10h432c5.5,0,10,4.5,10,10V617z"/>
                                        <rect x="-8.5" y="348.4" width="49.9" height="159.7"/>
                                        <path d="M177.7,346.9c-28.6,0-46.5,15.6-49.8,26.6v-25.1H71.8c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1
                                            c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4v82.6H241v-88.8C241,369.9,213.2,346.9,177.7,346.9z"/>
                                        <path d="M15.4,273c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7
                                            C45.1,284.9,33.8,273,15.4,273z"/>
                                    </g>
                                </svg>
                            </a>
                        </div>
                        {#<div class="review_pdf">
                            <a href="#"></a>
                        </div>#}
                    </div>
                </div>
                <div class="news_detail_header_section">
                    <div class="details animate_start" data-params='{"opacity": [0, 1], "translateX": [-100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        <div>
                            {{ newLang.description|default|raw }}
                        </div>
                    </div>
                    <div class="news_detail_swiper animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                        <div class="swiper_overflow">
                            <div class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    {% if new.sliders is defined%}
                                        {% for slider in new.sliders|filter(e => e.del == 0) %}
                                            {% set sliderLang = getNewsSlidersLangs({'NewSlider': slider, 'lang': app.request.locale}) %}
                                            {% set sliderImage = getNewsSliderImages({'new': slider, 'type': 'sliderImage'}) %}
                                            {% set sliderLogoImage = getNewsSliderImages({'new': slider, 'type': 'sliderLogo'}) %}

                                            <div class="swiper-slide">
                                                <div class="main_img">
                                                    {% set dir = getParameters("page_news_slider_image_dir") %}
                                                    {% set imageDir = sliderImage is defined and sliderImage.name is defined ? (dir ~ sliderImage.name) : '/assets/img/all-images/g-4.jpg' %}

                                                    <img src="{{ asset(imageDir) }}" alt="{{ newsLang.imageAlt[loop.index - 1]|default }}">
                                                </div>
                                                <div class="brand_img">
                                                    {% set dir = getParameters("page_news_slider_image_dir") %}
                                                    {% set imageDir = sliderLogoImage is defined and sliderLogoImage.name is defined ? (dir ~ sliderLogoImage.name) : 'assets/img/brand/beoft-brand.png' %}

                                                    <img src="{{ asset(imageDir) }}" alt="{{ newsLang.logoAlt[loop.index - 1]|default }}">
                                                </div>
                                                <div class="slide_header">
                                                    <p>{{ sliderLang.description|default|raw }}</p>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <div class="swiper-slide">
                                            <div class="main_img">
                                                <img src="{{ asset('assets/img/all-images/g-4.jpg') }}" alt="image">
                                            </div>
                                            <div class="brand_img">
                                                <img src="{{ asset('assets/img/brand/beoft-brand.png') }}" alt="brand">
                                            </div>
                                            <div class="slide_header">
                                            </div>
                                        </div>
                                    {% endif %}

                                </div>
                                <div class="swiper-button-next news_detail_swiper_next">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </div>
                                <div class="swiper-button-prev news_detail_swiper_prev">
                                    <i class="fa-solid fa-chevron-left"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="root_body">
                <div class="root_body_pad">
                    <div class="news_header_filter_container">
                        <div class="news_header_filter">
                            <div class="icon animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                <svg fill="#c41329" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                     viewBox="0 0 442 442" xml:space="preserve">
                                    <g>
                                        <path d="M171,336H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.523,0,10-4.477,10-10S176.523,336,171,336z" />
                                        <path d="M322,336H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,336,322,336z" />
                                        <path d="M322,86H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h252c5.522,0,10-4.477,10-10S327.522,86,322,86z" />
                                        <path d="M322,136H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,136,322,136z" />
                                        <path d="M322,186H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,186,322,186z" />
                                        <path d="M322,236H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,236,322,236z" />
                                        <path d="M322,286H221c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.522,0,10-4.477,10-10S327.522,286,322,286z" />
                                        <path d="M171,286H70c-5.523,0-10,4.477-10,10s4.477,10,10,10h101c5.523,0,10-4.477,10-10S176.523,286,171,286z" />
                                        <path d="M171,136H70c-5.523,0-10,4.477-10,10v101c0,5.523,4.477,10,10,10h101c5.523,0,10-4.477,10-10V146
		C181,140.477,176.523,136,171,136z M161,237H80v-81h81V237z" />
                                        <path d="M422,76h-30V46c0-11.028-8.972-20-20-20H20C8.972,26,0,34.972,0,46v320c0,27.57,22.43,50,50,50h342c27.57,0,50-22.43,50-50
		V96C442,84.972,433.028,76,422,76z M422,366c0,16.542-13.458,30-30,30H50c-16.542,0-30-13.458-30-30V46h352v305
		c0,13.785,11.215,25,25,25c5.522,0,10-4.477,10-10s-4.478-10-10-10c-2.757,0-5-2.243-5-5V96h30V366z" />
                                    </g>
                                </svg>
                            </div>
                            <div class="header animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                <h3> {{ "pages.news.news-title"|trans }} </h3>
                            </div>
                            <div class="show_info animate_start" data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 600}'>
                                <p>Showing 1 - 10 press releases of 48</p>
                            </div>
                        </div>
                    </div>
                    <div class="other_news">
                        {% for moreNew in moreNews %}
                            {% set moreNewLang = getNewsLangs({'News': moreNew, 'lang': app.request.locale}) %}
                            <a href="{{ path('app_main_news_detail', {slug: moreNewLang.link}) }}">
                                <div class="news">
                                    <span>{{ moreNewLang.title|default }}</span>
                                    <p>{{ moreNewLang.text|default }}</p>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                    <div class="load_more_button">
                        <button> {{ "pages.news-detail.detail-load-more"|trans }} </button>
                    </div>
                </div>
            </div>
            {% include "components/innerPageFooter.html.twig" %}
        </div>
    </div>
{% endblock %}
{% block javascripts_bottom %}
    <script src="{{ asset('assets/js/navbar.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script>
        $(document).ready(function() {
            const itemsPerPage = 8;
            let itemsShown = itemsPerPage;

            $('.other_news a').hide().slice(0, itemsPerPage).show();

            $('.load_more_button button').on('click', function() {
                $('.other_news a').slice(itemsShown, itemsShown + itemsPerPage).fadeIn();

                itemsShown += itemsPerPage;

                if (itemsShown >= $('.other_news a').length) {
                    $(this).hide();
                }

                updateShowInfo();
            });

            function updateShowInfo() {
                const totalItems = $('.other_news a').length;
                $('.show_info p').text(` {{ "pages.news-detail.show"|trans }} 1 - ${itemsShown > totalItems ? totalItems : itemsShown} {{ "pages.news-detail.press"|trans }} ${totalItems}`);
            }

            updateShowInfo();
        });
    </script>

    <script>
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 30,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
{% endblock %}