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

{% block title %}Organigramme du Groupe - Commission {{ department.name }}{% 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 - Commission {{ department.name }}</h1>
                </div>
                <div class="card-body bg-white py-3">

                    <div class="row">
                        <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': '{{ 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 %}
        };

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