{% extends 'base.html.twig' %}

{% block title %}Partenaires du Groupe{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 mb-3">
                <div class="card-header bg-grey">
                    <h1 class="h5 text-white m-0 fw-bold">Partenaires du Groupe</h1>
                </div>
                <div class="card-body bg-white py-3">
                    <div class="row">
                        <div class="col-12">
                            <h2>Filtrer</h2>
                        </div>
                        {% for partner in partners %}
                            <div class="col-12 col-lg-6 col-xl-3 mb-3">
                                <div class="bg-primary text-center h-100">
                                    <a href="{{ path('organisation_partner', {'partner': partner.id}) }}"
                                       class="text-white fw-bold nice-link text-uppercase d-block p-5">{{ partner.name }}</a>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-12">
                            <div id="chartContainer" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('organisation') }}
    <script>
        let datasource = {
            'name': 'Partenaires',
            'title': '',
            'type': 'root',
            'className': 'root',
            'children': [
                {%- for partner in partners -%}
                {
                    'name': '{{ partner.name }}',
                    'title': '{{ partner.shortDescription }}',
                    'type': 'user',
                    'isAssociate': false,
                    'isManager': false,
                    'picture': '{{ partner.base64Logo ?: asset('images/default-user-picture.png') }}',
                    'className': '',
                    'link': "{{ path('partner_partner', {'partner': partner.id, 'slug': partner.slug}) }}"
                    {%- if not partner.members.empty %},
                        'children': [
                            {% for user in partner.members %}
                                {
                                    'name': '{{ user.fullName }}',
                                    'title': '{{ user.jobFunctions | join(', ') }}',
                                    'type': 'user',
                                    'isAssociate': {{ user.isAssociate ? 'true' : 'false' }},
                                    'isManager': {{ user.isManager ? 'true' : 'false' }},
                                    'isPartnerManager': {{ partner.managers.contains(user) ? 'true' : 'false' }},
                                    'picture': '{{ user.base64Picture ?: asset('images/default-user-picture.png') }}',
                                    'className': '{% if partner.managers.contains(user) %}super-user{% endif %}',
                                    'link': "{{ path('organisation_collaborator', {'user': user.id}) }}"
                                }
                                {%- if not loop.last %},{% endif %}
                            {% endfor %}
                        ]
                    {% endif %}
                }
                {% if not loop.last %},{% endif %}
                {%- endfor -%}
            ]
        };

        defaultOrgChartConfig.data = datasource;
        let orgchart = new OrgChart(defaultOrgChartConfig)
    </script>
{% endblock %}