{% extends 'main_base.html.twig' %}
{% block title %}Basın{% endblock %}

{% block pageStyle %}
    <style>
        .fit-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Banner */
        #pageBanner {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #pageBanner .banner-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #pageBanner .banner-content {
            text-align: center;
            color: #fff;
        }

        #pageBanner .banner-title {
            font-size: 2em;
        }

        #pageBanner .banner-subtitle {
            font-size: 1.25em;
        }

        /* Content */
        #pageContent {
            width: 100%;
            height: 100vh;
            display: flex;
        }

        #pageContent .content-left,
        #pageContent .content-right {
            width: 50%;
            height: 100%;
        }

        #pageContent .content-left {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
        }

        #pageContent .content-right {
            box-sizing: border-box;
            padding: 0 5%;
        }

        #basinSwiper {
            margin-top: 5vh;
        }

        #basinSwiper .explore-box-background {
            display: block;
            margin: 0 auto;
        }

        #pageContent .content-right p {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            color: #8c8c8c;
        }

        #pageContent .content-right p:first-child {
            margin-top: 5vh;
            margin-bottom: 30px;
        }

        #pageContent .review-assert {
            margin-top: 5vh;
        }

        #pageContent .review-assert .review-rob {
            background-color: var(--main-bg-color);
            box-sizing: border-box;
            padding: 1em;
            border-radius: 1em;
            min-height: 120px;
            margin-bottom: 2em;
        }

        #pageContent .review-assert .rob-title {
            text-transform: uppercase;
            font-weight: 500;
            font-size: 1em;
            color: var(--main-text-color);
        }

        #pageContent .review-assert .date-resolver {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            height: 20px;
            overflow: hidden;
        }

        #pageContent .review-assert .date-resolver span {
            transition: transform 0.5s ease;
        }

        #pageContent .review-assert .date-resolver a {
            color: inherit;
        }

        #pageContent .review-assert .date-resolver:hover span {
            transform: translateY(-100%);
        }

        #pageContent .review-link {
            display: block;
            padding: 5px 0;
            background-color: var(--main-text-color);
            text-decoration: none;
            text-align: center;
            color: #fff;
        }

        @media screen and (max-width: 1024px) {
            #pageContent {
                height: auto;
                flex-direction: column;
                margin-bottom: 5vh;
            }

            #pageContent .content-left,
            #pageContent .content-right {
                width: 100%;
                height: auto;
                box-sizing: border-box;
                padding: 0 15px;
            }

            #pageContent .content-left {
                margin-top: 5vh;
            }

            #pageContent .review-link {
                display: inline-block;
                padding: 5px 15px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <section class="page-section" id="pageBanner">
        <img class="banner-img" src="{{ asset('uploads/basin/banner/'~basinDil.basin.banner) }}" alt="">
        <div class="box-cover banner-content">
            <h1 class="banner-title">BASINDAN</h1>
            <div class="banner-subtitle">Basın</div>
            <a class="slide-to-down" href="#">Aşağı Kaydır</a>
        </div>
    </section>

    <section class="page-section" id="pageContent">
        <div class="content-left">
            <div class="swiper" id="basinSwiper">
                <div class="swiper-wrapper">
                    {% for resim in basinDil.basin.resimler|filter(r => r.del == 0) %}
                        <div class="swiper-slide">
                            <img class="explore-box-background" src="{{ asset('uploads/basin/'~resim.resim) }}" alt="">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="review-assert">
                {% for dosya in basinDil.basin.dosyalar %}
                    <div class="review-rob">
                        <h2 class="rob-title">{{ dosya.baslik }}</h2>
                        <div class="date-resolver">
                            <span>{{ dosya.createDate|date('Y.m.d') }}</span>
                            <span><a href="{{ asset('uploads/basin/dosyalar/'~dosya.dosya) }}" target="_blank">Download PDF</a></span>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a href="#" class="review-link">Daha Fazla</a>
        </div>
    </section>
{% endblock %}

{% block pageScript %}
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            new Swiper('#basinSwiper', {
                speed: 2500,
                autoplay: {
                    delay: 3500
                }
            });
        });
    </script>
{% endblock %}