{% extends 'main_base.html.twig' %}
{% block title %}Blog{% endblock %}
{% block description %}Blog{% endblock %}



{% block content %}
    <style>
        .navbar__section-links__wrapper :not(.BLOG) {
            opacity: 0.4 !important;
        }


        .navbar__section-logo__wrapper-img {
            filter: brightness(0) invert(1) !important;
        }

        .production__section-sliders-slider-description {
            margin-right: 10rem;
        }

        .navbar__section::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: -1;

        }

        .navbar__section::after {
            content: "";
            background-image: url("{{ asset('assets/main/images/navbar/navbar-bg-blog.png') }}");
            background-position: center;
            background-size: cover;

            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: -2;

        }

        .video__section {
            margin-top: 0 !important;
            padding-bottom: 8% !important;
        }

        .blog__section-description h2 {
            margin-right: 0;
        }

        .blog__section-description p {
            padding-right: 35%;
        }

    </style>
    <style>
        {#    <section class="page-section" id="pageBanner">#}
        {#        <img class="banner-img" src="{{ asset('uploads/blog/banner/'~blogDil.blog.banner) }}" alt="">#}
        {#        <div class="box-cover banner-content">#}
        {#            <h1 class="banner-title">COLOSSAE</h1>#}
        {#            <div class="banner-subtitle">{{ blogDil.baslik }}</div>#}
        {#            <a class="slide-to-down" href="#">Aşağı Kaydır</a>#}
        {#        </div>#}
        {#    </section>#}

        {#    <section class="page-section" id="pageContent">#}
        {#        {% for bolum in blogDil.blog.bolumler %}#}
        {#            {% set defaultDil = bolum.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
        {#            <div class="content-row">#}
        {#                <div class="content-box x-align-center">#}
        {#                    <h2 class="box-title">{{ defaultDil.baslik }}</h2>#}
        {#                    {{ defaultDil.metin|raw }}#}
        {#                </div>#}
        {#                <div class="content-box scroll-animation slide-screen">#}
        {#                    {% for resim in bolum.resimler|filter(r => r.del == 0) %}#}
        {#                        <img src="{{ asset('uploads/blog/bolum/'~resim.resim) }}" alt="">#}
        {#                    {% endfor %}#}
        {#                </div>#}
        {#            </div>#}
        {#        {% endfor %}#}
        {#    </section> #}</style>
    <div id="blog">
        {% include 'main/default/loader.html.twig' %}
        {% include 'main/default/cookie.html.twig' %}
        <div class="main-container">
            <div class="blog__section">
                <div class="blog__section-active__page">
                    <p><a href="{{ path('app_main_default') }}">Elefante</a> / <a class="active" href="">Blog</a></p>
                </div>
                {% for blog in blogResim %}

                    {% set classNames = ['', ' blog__flexible__second' ] %}
                    <div class="blog__flexible{{ classNames[loop.index0] ?? classNames|last }}">
                        <div class="blog__column__left blog__column">
                            <div class="blog__link">
                                <div class="feature__text__paired">
                                    <div class="title__relative">
                                        <h2 class="majortitle">
                                            {% for dil in blog.diller %}
                                                {{ dil.baslik }}
                                            {% endfor %}
                                        </h2>

                                    </div>


                                    <div class="center__text"><p>
                                            {% for dil in blog.diller %}
                                                {{ dil.title|raw }}
                                            {% endfor %}
                                        </p>
                                        <p></p>
                                        <p>
                                            {% for dil in blog.diller %}
                                                {{ dil.description|raw }}
                                            {% endfor %}
                                        </p>
                                    </div>
                                    <div class="lightly__spaced__row__above">

                                        {% for detay in blog.bolumler %}

                                            <a class="btn btn--primary"
                                               href="{{ path('app_main_bolum', {'code': detay.code}) }}">CONTINUE
                                                READING</a> {% else %}
                                            <a class="btn btn--primary" href="">CONTINUE READING</a>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="blog__column__right blog__column">
                            <a href="" class="blog__link">

                                <div class="image__overlap">
                                    {% for resim in blog.resimler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                        <div class="image__overlap__image overlap__image__{{ loop.index }}">
                                            <div class="image__overlap__wrapper">


                                                <img
                                                        src="{{ asset('uploads/blog/' ~ resim.resim) }}"
                                                        alt="">


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

                                </div>

                            </a>
                        </div>
                    </div>

                {% endfor %}

            </div>
        </div>
    </div>

{% endblock %}
{% block body_js %}
    {% include 'main/default/scripts.html.twig' %}
{% endblock %}