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

{% block title %}Organigramme du Groupe - Commissions{% 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">Organigramme du Groupe - Commissions</h1>
                </div>
                <div class="card-body bg-white py-3">
                    <div class="row">
                        <div class="col-12">
                            <h2>Filtrer</h2>
                        </div>
                        {% for department in departments %}
                            {% if department.name != "Partenaires" %}
                            <div class="col-12 col-lg-6 col-xl-3 mb-3">
                                <div class="bg-primary text-center">
                                    <a href="{{ path('organisation_department', {'department': department.id}) }}"
                                       class="text-white fw-bold nice-link text-uppercase d-block p-5"><i
                                                class="{{ department.logoClass }} fs-1"></i>
                                        <br><br>{{ department.name }}</a>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                        <div class="col-12">
                            <h2>Organigramme</h2>
                            <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': 'Commissions',
                'title': '',
                'type': 'department',
                'className': 'department',
                'children': [
                    {% for department in departments %}
                    {
                        'name': '{{ department.name }}',
                        'title': '',
                        'type': 'department',
                        'className': 'department'{% if not department.members.empty %},
                        'children': [
                            {
                                'name': '{{ department.userInCharge.fullName }}',
                                'title': '{{ department.userInCharge.jobFunctions | join(', ') }}',
                                'type': 'user',
                                'isAssociate': {{ department.userInCharge.isAssociate ? 'true' : 'false' }},
                                'isManager': {{ department.userInCharge.isManager ? 'true' : 'false' }},
                                'isInChargeOfDepartment': true,
                                'picture': '{{ department.userInCharge.base64Picture ?: asset('images/default-user-picture.png') }}',
                                'className': '{% if department.userInCharge.isAssociate or department.userInCharge.isManager %}super-user{% endif %}',
                                'link': "{{ path('organisation_collaborator', {'user': department.userInCharge.id}) }}"
                            },
                            {%- for user in department.members -%}
                            {
                                'name': '{{ user.fullName }}',
                                'title': '{{ user.jobFunctions | join(', ') }}',
                                'type': 'user',
                                'isAssociate': {{ user.isAssociate ? 'true' : 'false' }},
                                'isManager': {{ user.isManager ? 'true' : 'false' }},
                                'isInChargeOfDepartment': {{ department in user.departmentsInChargeOf ? 'true' : 'false' }},
                                'picture': '{{ user.base64Picture ?: asset('images/default-user-picture.png') }}',
                                'className': '{% if user.isAssociate or user.isManager %}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 %}