{% extends 'main/base.html.twig' %}
{% set pageCode = "our-collaborations" %}
{% block pageMeta %}
    {% for lang in get_diller() %}
        <link rel="alternate" hreflang="{{ lang|default }}" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': lang}))) }}">
    {% endfor %}

    <link rel="canonical" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': app.request.locale}))) }}">
{% endblock %}

{% block pageStyle %}
    <style>
        .partnership-items {
            width: 100%;
            margin: 0 auto;
            grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
            display: grid;
            column-gap: 30px;
            row-gap: 70px;
            padding-top: 50px;
            position: relative;
            z-index: 10
        }
        .partnership-item-box {
            width: 100%;
            background-color: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 240px;
            border-radius: 20px
        }

        .partnership-item-box-image {
            width: 60%
        }

        .partnership-item-box img {
            width: 100%;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            opacity: .3
        }

        .partnership-item-text {
            font-weight: 300;
            text-align: center;
            color: #848484;
            line-height: 25px;
            padding-top: 35px
        }

        .partnership-item-text h3 {
            font-size: 16px;
            font-weight: 300;
            color: #606060;
            font-family: "Roboto Slab"
        }

        .partnership-item-text p {
            opacity: .8;
            color: var(--turquoise);
            font-family: "Roboto Slab";
            font-size: 14px;
            line-height: 1.4
        }
    </style>

{% endblock %}
{% block content %}
    {% block banner %}
        <header>
            <div class="header-img">
                {% if sayfa.banner %}
                    <img loading="lazy" src="{{ asset('uploads/is-birliklerimiz/banner/'~sayfa.banner) }}" alt="Dentmax İş Birliklerimiz">
                {% else %}
                    <img loading="lazy" src="{{ asset('assets/main/img/dentmax-is-birliklerimiz.jpg') }}" alt="Dentmax İş Birliklerimiz">
                {% endif %}
            </div>
            <div class="header-content">
                <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                    {{ 'is_birliklerimiz'|trans({'%brand%': '', '%split%': ''})|raw }}
                </h1>
                {#<p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>#}
            </div>
            <div class="header-invisalign">
                <img loading="lazy" src="{{ asset('build/main/img/icons/dentMax.webp') }}" alt="Dentmax invisailgn"
                     data-aos="fade-in" data-aos-duration="800" data-aos-delay="600">
            </div>
            <div class="header-document-path">
                <strong class="path-title">DENTMAX {{ 'kurumsal'|trans|upper }}</strong>
                <div class="content-router-links-path">
                    <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                    <a role="button" tabindex="0">Dentmax {{ 'kurumsal'|trans }} /</a>
                    <a role="button" tabindex="0">{{ 'is_birliklerimiz'|trans({'%brand%': '', '%split%': ''})|raw }}</a>
                </div>
            </div>
        </header>
    {% endblock %}
    {% block container %}
        <div class="wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}
            <div class="content">
                <div class="global-content">
                    <div class="content-router">
                        <div class="content-router-links">
                            <ul>
                                {% for sayfa in kurumsalSayfalar %}
                                    <li><a href="{{ path('app_main_kurumsal', {'link': sayfa.diller|first.link}) }}">{{ sayfa.diller|first.baslik }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="content-router-contact-wrapper">
                            <div class="content-router-contact" id="content-router-contact">
                                {{ include('main/partials/contact-wrapper.html.twig') }}
                            </div>
                        </div>
                    </div>
                    <div class="content-wrapper">
                        <div class="collaborations collaborations_js">
                            <div class="partnership-items">
                                {% for marka in isBirliklerimiz %}
                                    {% set src = asset('uploads/is-birliklerimiz/'~marka.resim) %}
                                    <div class="partnership-item" data-aos="fade-right" data-aos-duration="700" data-aos-delay="100">
                                        <div class="partnership-item-box collaborations-logo_js">
                                            <div class="partnership-item-box-image">
                                                <img loading="lazy" src="{{ src }}" alt="">
                                            </div>
                                        </div>
                                        <div class="partnership-item-text">
                                            <p>{{ marka.diller|first.baslik|default }}</p>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}