{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @copyright 2003-2014 by the INDEPNET Development Team.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

{% set rand = random() %}

<div class="dropdown dropstart">
    <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="ti ti-user-check"></i>
        {{ (session('glpiactiveprofile')['name'] ?? '')|verbatim_value }}
    </button>
    <div class="dropdown-menu" data-bs-popper="none">
        <span class="dropdown-header">{{ __('Profiles') }}</span>
        {% for profile_id, profile in session('glpiprofiles') %}
            <a class="dropdown-item {{ profile_id == (session('glpiactiveprofile')['id'] ?? 0) ? 'active' : '' }}" href="{{ index_path() }}?newprofile={{ profile_id }}">
                <i class="ti ti-user-check"></i>
                {{ profile['name']|verbatim_value }}
            </a>
        {% endfor %}
    </div>
</div>

{% set target = path("front/central.php") %}
{% if get_current_interface() == "helpdesk" %}
    {% set target = path("front/helpdesk.public.php") %}
{% endif %}

{% set current_entity = session('glpiactive_entity_name')|verbatim_value %}
{% set current_entity_short = session('glpiactive_entity_shortname')|verbatim_value %}
{% if current_entity != current_entity_short %}
    {% set current_entity_short = '... > ' ~ current_entity_short %}
{% endif %}
{% if not is_multi_entities_mode() %}
    <span class="dropdown-item dropdown-item-text" title="{{ current_entity }}">
        <i class="fa-fw ti ti-stack"></i>
        {{ current_entity_short|u.truncate(35, '...') }}
    </span>
{% else %}
    <div class="dropdown dropstart" id="entity-tree-dropdown-{{ rand }}">
        <a href="#" class="dropdown-item dropdown-toggle entity-dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" title="{{ current_entity }}">
            <i class="fa-fw ti ti-stack"></i>
            {{ current_entity_short|u.truncate(35, '...') }}
        </a>
        <div class="dropdown-menu p-3">
            <h3>{{ __('Select the desired entity') }}</h3>

            <div class="alert alert-info" role="alert">
                {% set shortcut = __('Ctrl + Alt + E') %}
                {% if platform == constant("donatj\\UserAgent\\Platforms::MACINTOSH") %}
                    {% set shortcut = __('⌥ (option) + ⌘ (command) + E') %}
                {% endif %}
                {{ __("Tip: You can call this modal with %s keys combination")|format('<kbd>' ~ shortcut ~ '</kbd>')|raw }}
            </div>
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle"></i>
                <span class="ms-2">
                {% set recursive_icon %}
                    <i class="fas fa-angle-double-down" title="{{ __('+ sub-entities') }}"></i>
                {% endset %}
                {{ __('Click on the %s icon to load the elements of the selected entity, as well as its sub-entities.')|format(recursive_icon)|raw }}
                </span>
            </div>

            <form id="entsearchform{{ rand }}">
                <div class="input-group">
                <input type="text" class="form-control" name="entsearchtext" id="entsearchtext{{ rand }}"
                        placeholder="{{ __('Search entity') }}" autocomplete="off">
                <button type="submit" class="btn btn-icon btn-primary" title="{{ __('Search') }}"
                        data-bs-toggle="tooltip" data-bs-placement="top">
                    <i class="ti ti-search"></i>
                </button>
                <a class="btn btn-icon btn-outline-secondary" href="#" id="entsearchtext{{ rand }}_clear"
                    title="{{ __("Clear search") }}" data-bs-toggle="tooltip" data-bs-placement="top">
                        <i class="ti ti-x"></i>
                </a>
                <a href="{{ target }}?active_entity=all" class="btn btn-secondary"
                    title="{{ __('Select all') }}" data-bs-toggle="tooltip" data-bs-placement="top">
                    <i class="ti ti-eye"></i>
                </a>
                </div>
            </form>

            <div class="fancytree-grid-container flexbox-item-grow entity_tree">
                <table id="tree_entity{{ rand }}">
                <colgroup>
                    <col></col>
                </colgroup>
                <thead>
                    <tr>
                        <th class="parent-path"></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                </table>
                <div id="verticalScrollbar-{{ rand }}" style="height:100%;"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(function() {
        var initTree{{ rand }} = function() {
            if ($.ui.fancytree.getTree("#tree_entity{{ rand }}") !== null) {
                return;
            }

            $('#tree_entity{{ rand }}').fancytree({
                // load plugins
                extensions: ['filter', 'glyph', 'grid'],

                // Scroll node into visible area, when focused by keyboard
                autoScroll: true,

                // enable font-awesome icons
                glyph: {
                    preset: "awesome5",
                    map: {}
                },

                // enable virtual dom, it requires the grid (table extension) plugin
                table: {
                    indentation: 20,       // indent 20px per node level
                    nodeColumnIdx: 0,      // render the node title into the 1st column
                    mergeStatusColumns: false,
                },
                grid: {
                    mergeStatusColumns: false,
                },
                viewport: {
                    enabled: true,
                    count: 15, // number of items to display at once
                },

                // translate strings
                strings: {
                    loading: __("Loading..."),
                    loadError: __("Unexpected error."),
                    moreData: __("More..."),
                    noData: __("No data found")
                },

                // load data by ajax
                source: {
                    url:  '{{ path("/ajax/entitytreesons.php") }}',
                    cache: false
                },

                // filter plugin options
                filter: {
                    mode: "hide", // remove unmatched nodes
                    autoExpand: true, // if results found in children, auto-expand parent
                    nodata: '{{ __("No entity found") }}', // message when no data found
                    highlight: false, // do not highlight matches by wrapping inside tags (when true, this strip the a tag)
                    counter: false, // do not show counters when filtering entity tree
                },

                // load 3rd party scrollbar extension for viewport mode
                preInit: function(event, data) {
                    var tree = data.tree;

                    tree.verticalScrollbar = new PlainScrollbar({
                    alwaysVisible: true,
                    arrows: true,
                    orientation: "vertical",
                    onSet: function(numberOfItems) {
                        tree.setViewport({
                            start: Math.round(numberOfItems.start),
                        });
                    },
                    scrollbarElement: document.getElementById("verticalScrollbar-{{ rand }}"),
                    });
                },

                // update scrollbar when viewport is updated
                updateViewport: function(event, data) {
                    var tree = data.tree;

                    tree.verticalScrollbar.set({
                    start: tree.viewport.start,
                    total: tree.visibleNodeList.length,
                    visible: tree.viewport.count,
                    }, true);  // do not trigger `onSet`

                    initTooltips();
                },

                // update toolips on node expand
                expand: function(event, data) {
                    initTooltips();
                },
            });
        };

      // init Entities tree only when user ask for it (when dropdown is opened)
        document.getElementById('entity-tree-dropdown-{{ rand }}')
            .addEventListener('show.bs.dropdown', function (event) {
                initTree{{ rand }}();
            });

        var searchTree = function() {
            var search_text = $("#entsearchtext{{ rand }}").val();
            $.ui.fancytree.getTree("#tree_entity{{ rand }}").filterBranches(search_text);
        }

        $('#entsearchform{{ rand }}').submit(function(event) {
            // cancel submit of entity search form
            event.preventDefault();

            searchTree();
        });

        $('#entsearchtext{{ rand }}').keyup(function () {
            var inputsearch = $(this);
            typewatch(function () {
                if (inputsearch.val().length >= 3) {
                searchTree();
                }
            }, 500);
        }).focus();

        $('#entsearchtext{{ rand }}_clear').click(function () {
            $('#entsearchtext{{ rand }}').val('');
            searchTree();
        });

        // when the shortcut for entity form is called
        hotkeys('ctrl+alt+e, option+command+e', async function(e) {
            e.stopPropagation();
            e.preventDefault();
            $('.user-menu-dropdown-toggle').dropdown('show');
            await new Promise(r => setTimeout(r, 100));
            $('.entity-dropdown-toggle').dropdown('show');
            $('input[name=entsearchtext]').filter(":visible")[0].focus();
        });
    });
    </script>
{% endif %}
