{% extends 'main_base.html.twig' %}
{% block title %}{{ sayfa.title }}{% endblock %}
{% block description %}{{ sayfa.description }}{% endblock %}
{% block content %}
    <div class="page_head" id="yonetim-banner" style="background-image: url('{{ asset('uploads/yonetim/banner/'~sayfa.yonetim.banner) }}')">
        <h1 class="page-title animate__animated animate__flipInX">{{ 'management'|trans }}</h1>
        <div class="tree animate__animated animate__slideInDown">
            <a href="{{ path('app_main_default') }}">{{ 'home'|trans }} </a>
            <span>/</span>
            <a href="javascript:void(0);">{{ 'aboutus'|trans }}</a>
            <span>/</span>
            <a href="javascript:void(0);" class="activetree">{{ 'management'|trans }}</a>
        </div>
        {#<div class="innerPage-banner-img-hiz">
            <img src="{{ asset('assets/main/img/cert.png') }}" alt="">
        </div>#}
    </div>

    <div class="container">
        <div class="history-wrappers">
            <div class="yonetim">
                {% for departman in departmanlar %}
                    {% set departmanDil = departman.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                    <div class="departman">
                        {#<div class="history-left mb-5">
                            <div class="history-text">
                                <h4>{{ departman.diller|first.baslik }}</h4>
                            </div>
                        </div>#}
                        <div class="mt-5 text-center">
                            <h4 class="text-main">{{ departmanDil.baslik }}</h4>
                        </div>
                        <div class="members">
                            {% for unvan in departman.unvanlar|filter(u => u.del == 0) %}
                                {% set unvanDil = unvan.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                {% for uye in unvan.ekip|filter(u => u.del == 0) %}
                                    <div class="yt-box" data-order="{{ uye.sira }}">
                                        <div class="yt-img">
                                            <div class="profil-efekt"></div>
                                            {% if uye.resim %}
                                                <img src="{{ asset('uploads/ekip/'~uye.resim) }}" alt="">
                                            {% endif %}
                                        </div>
                                        <span class="yt-box-span1">{{ uye.ad~' '~uye.soyad|upper }}</span>
                                        <span class="yt-box-span2">{{ unvanDil.baslik }}</span>
                                    </div>
                                {% endfor %}
                            {% endfor %}
                            <div class="temizle"></div>
                        </div>
                        {#<button class="form-control yt-more yt-more-yonetim">Daha Fazla Yükleyin</button>#}
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="temizle"></div>
    </div>
{% endblock %}

{% block pageScript %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            $(".yonetim .departman").each(function () {
                let shortMembers = $(this).find(".yt-box").sort((a,b) => $(a).data("order") - $(b).data("order"));
                $(this).find(".members").remove(".yt-box").prepend(shortMembers);
            });
        });
    </script>
{% endblock %}