{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title|default }}{% endblock %}
{% block metaDescription %}{{ meta.description|default }}{% endblock %}

{% block stylesheets %}
{% endblock %}
{% block body %}
        <div class="root_container">
            {% set newsPage = getPages({'alias': 'Haberler'}) %}
            {% set newSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': newsPage.id}) %}
            {% set newIntroLang = getPageSectionLangLocale({'section': newSection, 'locale': app.request.locale}) %}
            {% if newIntroLang is defined %}
                <div class="root_header">
                    <h5>{{ newIntroLang.shortTitle|default }}</h5>
                    <h2 class="animate_start"
                        data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ newIntroLang.title|default }}</h2>
                    <div>{{ newIntroLang.text|default|raw }}</div>
                </div>
            {% else %}
                <div class="root_header">
                    <h5>NEWS</h5>
                    <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>News and announcements about our group</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
                    </p>
                </div>
            {% endif %}

            <div class="root_body">
                <div class="root_body_pad">
                    <div class="news_header_filter_container">
                        <div class="news_header_filter">
                            <div class="icon">
                                <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">
                                <h3> {{ "pages.news.news-title"|trans }} </h3>
                            </div>
{#                            <div class="filter">#}
{#                                <span data-category="all" class="active"> {{ "pages.news.all"|trans }} </span>#}
{#                                <span data-category="news">{{ "pages.news.news"|trans }}</span>#}
{#                                <span data-category="fairs">{{ "pages.news.fairs"|trans }}</span>#}
{#                                <span data-category="openings">{{ "pages.news.openings"|trans }}</span>#}
{#                            </div>#}
                        </div>
                    </div>

                    <div class="news_cards">
                        {% set news = getNews(null) %}
                        {% for new in news %}

                            {% set newsLang = getNewsLangs({'News': new, 'lang': app.request.locale}) %}
                            {% set newsImage = getNewsImages({'new': new, 'type': 'image'}) %}
                            {% set newsLogoImage = getNewsImages({'new': new, 'type': 'logo'}) %}


                            <div class="news_card animate_start" data-category="news" data-params='{"opacity": [0, 1], "translateY": [100, 0], "duration": 700, "easing": "easeInOutQuad"}'>
                                <a href="{{ path('app_main_news_detail', {slug: newsLang.link }) }}">
                                    {% set dir = getParameters("page_news_image_dir") %}

                                    <div class="news_image">
                                        {% set imageDir = newsImage is defined and newsImage.name is defined ? (dir ~ newsImage.name) : 'assets/img/brand/news-bg.jpeg' %}

                                        <img src="{{ asset(imageDir) }}" alt="{{ newsLang.imageAlt[0]|default }}">
                                        <div class="news_brand_image">
                                            {% set imageLogoDir = newsLogoImage is defined and newsLogoImage.name is defined ? (dir ~ newsLogoImage.name) : 'assets/img/brand/akgun-brand.png' %}

                                            <img src="{{ asset(imageDir) }}" alt="{{ newsLang.logoAlt[0]|default }}">
                                        </div>
                                    </div>
                                    <div class="news_content">
                                        <span>{{ newsLang.shortTitle|default }}</span>
                                        <p>{{ newsLang.title|default }}</p>
                                    </div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% include "components/innerPageFooter.html.twig" %}
        </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() {
            $('.filter span').on('click', function() {
                $('.filter span').removeClass('active');
                $(this).addClass('active');

                const filter = $(this).data('category');

                if (filter === 'all') {
                    $('.news_cards').removeClass('filter-active');
                } else {
                    $('.news_cards').addClass('filter-active');
                }

                $('.news_cards .news_card').each(function() {
                    const cardCategory = $(this).data('category');

                    if (filter === 'all' || cardCategory === filter) {
                        $(this).fadeIn();
                    } else {
                        $(this).fadeOut();
                    }
                });
            });
        });
    </script>
{% endblock %}