{% macro tabsProject(data) %}
    {% import "forms-macro/popup.html.twig" as macro %}
    {{ macro.popup('danger','deleteProject',path('project_delete',{'id': 'IDPROJECTTOREMOVE'},'project','null','DELETE'),'projectDelete') }}
    <div id="tabs" style="margin-top: 0" class="col-sm-12 col-md-12 col-lg-12">
        <ul id="listTabs">
            {% for key,list in data %}
                <li><a href="#container{{ key }}">
                    <span>
                        <text class="hideOnSmartphone">Études</text>
                        {% if key == 'in_progress' %}
                            en cours
                        {% elseif key == 'win' %}
                            gagnées
                        {% elseif key == 'lose' %}
                            perdues
                        {% elseif key == 'archived' %}
                            archivées
                        {% elseif key == 'completed' %}
                            complètes
                        {% elseif key == 'finalizer' %}
                            finis
                        {% elseif key == 'duplicated' %}
                            dupliquées
                        {% endif %}
                    </span>
                </a></li>
            {% endfor %}
        </ul>
        <div id="containertabs" class="col-sm-12 col-md-12 col-lg-12">
            {% for key, list in data %}
                <div id="container{{ key }}">
                    <table id="table{{ key }}" style="width: 100%" class="hover row-border">
                        <thead>
                        <tr>
                            {% if app.current_route !== 'home' %}
                                <th style="text-align: center; width: auto">
                                    <span class="hideOnSmartphone">Sélectionner</span>
                                </th>
                            {% endif %}
                            <th style="text-align: center">Accéder</th>
                            <th>Client</th>
                            <th class="hideOnSmartphone">Société</th>
                            <th class="hideOnSmartphone">Nom projet</th>
                            <th>Créé le</th>
                            <th class="hideOnSmartphone">Utilisateur créateur</th>
                            <th class="hideOnSmartphone">Type</th>
                            <th class="hideOnSmartphone">Appareil</th>
                            <th class="hideOnSmartphone">Numéro de l'étude</th>
                            <th class="hideOnSmartphone">Mise à jour le</th>
                            {% if is_granted("ROLE_ADMIN") and key == "duplicated" %}
                                <th class="hideOnSmartphone">N° d’étude d’origine</th>
                            {% endif %}
                            <th style="text-align: center">Dupliquer</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            {% endfor %}
        </div>
    </div>
    {{ macro.popup_duplicate_project(null, false) }}
    <script type="application/javascript">
        $(document).ready(() => {
            if (isDemo) {
                setTimeout(() => {
                    applyTooltipToDisabledElements('input.demo-checkbox')
                }, 2000)
            }
        })
        $(function () {
            $("#tabs").tabs();
        });


        let isHome = {{ (app.current_route === 'home')|json_encode|raw }};
        let columnsDefault = [
            {
                data: 'selection',
                name: 'selection',
                orderable: false,
                render: function (data, type, full, meta) {
                    if (isDemo) {
                        return `<input type="checkbox" class="demo-checkbox" autocomplete="off" disabled>`
                    }
                    if (!full.isIB1) {
                        return `<input type="checkbox" class="project-checkbox" value="${full.id}" data-state="${state}" autocomplete="off">`
                    } else {
                        return `<input type="checkbox" class="project-checkbox" autocomplete="off" disabled>`
                    }
                }
            },
            {
                data: "id",
                name: "id_action",
                width: "5%",
                orderable: false,
                render: function (data, type, full, meta) {

                    let urlEditProject = '{{ path("project_edit", {'id': 'project_id'}) }}';
                    urlEditProject = urlEditProject.replace("project_id", full.id);

                    let code = '<a title="Consulter l\'étude"  style="cursor:pointer" href="' + urlEditProject + '">' +
                        '<img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}"></a>';

                    if (isAdmin) {
                        code += '<a title="Supprimer l\'étude" style="cursor:pointer" onclick="initDeleteProjectForm(' + full.id + ')" data-toggle="modal" data-target="#popup-danger-projectDelete">' +
                            '<img src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"></a>';
                    }

                    return code
                },
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css({
                        'text-align': 'center',
                        'height': '100%',
                        'vertical-align': 'middle',
                        'display': 'table-cell'
                    });
                    $(td).addClass('centerBtn');
                    $(td).find('a, button').wrapAll('<div style="display: flex; justify-content: center; align-items: center; gap: 5px;"></div>');
                }
            },
            {
                data: "finalCustomer",
                name: "finalCustomer",
                orderable: false,
                className: 'tdClient',
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "societe",
                name: "societe",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "projectName",
                name: "projectName",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "createdAt",
                name: "createdAt",
                orderable: true,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "createdBy",
                name: "createdBy",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "type",
                name: "type",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "model",
                name: "model",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "id",
                name: "id",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "updatedAt",
                name: "updatedAt",
                className: 'hideOnSmartphone',
                orderable: true,
                render: function (data, type, full, meta) {
                    return '<strong>' + data + '</strong>';
                }
            },
            {
                data: "originalProject",
                name: "originalProject",
                className: 'hideOnSmartphone',
                orderable: false,
                render: function (data, type, full, meta) {
                    let url = '{{ path('project_edit',{'id':'project_id'}) }}';
                    url = url.replace('project_id', data);
                    return '<a href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: "id",
                name: "duplicate",
                width: "5%",
                orderable: false,
                render: function (data, type, full, meta) {
                    let code = '';
                    if (!full.isIB1) {
                        code += '<button style="border: none;padding: 0;" onclick="initPopupLink(' + full.id + ')">' +
                            '<img src="{{ asset('install-bois/icon/tab_action_dupliquer.png') }}"></button>';
                    } else {
                        code += '<button style="border: none;padding: 0; cursor: not-allowed">' +
                            '<img src="{{ asset('install-bois/icon/tab_action_dupliquer_inactif.png') }}"></button>';
                    }

                    return code;
                },
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css({
                        'text-align': 'center',
                        'height': '100%',
                        'vertical-align': 'middle',
                        'display': 'table-cell'
                    });
                    $(td).addClass('centerBtn');
                    $(td).find('button').wrapAll('<div style="display: flex; justify-content: center; align-items: center; gap: 5px;"></div>');
                }
            },
        ];
        let state;
        let columns;
        {% for key,list in data %}
            state = '{{ key }}';
            columns = [];
            for (const column of columnsDefault) {
                if (isHome && column.name === 'selection') {
                } else if (state !== 'duplicated' && column.name === 'originalProject') {
                } else {
                    columns.push(column);
                }
            }
            initProjectList(state, columns);
        {% endfor %}

        function initProjectList(state, columns) {
            let url = "{{ path('project_datatable', {'state': 'XXSTATE'}) }}";
            url = url.replace('XXSTATE', state);
            $('#table' + state).DataTable({
                "processing": true,
                "serverSide": true,
                responsive: true,
                searching: true,
                "ajax": url,
                orderMulti: false,
                "bLengthChange": false,
                info: true,
                paging: true,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                order: [[isHome ? 9 : 10, "desc"]],
                deferRender: true,
                columns: columns,
                "oLanguage": {
                    "sSearch": "Rechercher : "
                }
            });
        }

        {% if is_granted("ROLE_ADMIN") %}
            function initDeleteProjectForm(projectId) {
                let url = '{{ path("project_delete", {'id': 'project_id','fromListProject':true}) }}';
                url = url.replace("project_id", projectId);
                $("#deleteProject")[0].action = url;
            }
        {% endif %}

        function initPopupLink(projectId) {
            let urlInfo = '{{ path("project_duplicate", {'id': 'project_id'}) }}';
            urlInfo = urlInfo.replace("project_id", projectId);
            let urlComplete = '{{ path("project_duplicate_with_services", {'id': 'project_id'}) }}';
            urlComplete = urlComplete.replace("project_id", projectId);
            $('#duplicateInfo').attr('href', urlInfo);
            $('#duplicateComplete').attr('href', urlComplete);
            $('#popup-duplicate-project').modal('show');
        }
    </script>
{% endmacro %}