{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @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/>.
 #
 # ---------------------------------------------------------------------
 #}

{% import 'components/form/fields_macros.html.twig' as fields %}

{% extends "layout/page_without_tabs.html.twig" %}

{% set container_size = "xl" %}

{% set icons = sort_strategies|map((value) => value.getIcon()) %}

{% block content_title %}
    <div class="d-flex">
        <ol class="breadcrumb breadcrumb-alternate" aria-label="{{ _n("Service catalog category", "Service catalog categories", get_plural_number()) }}" role="navigation">
            <li class="breadcrumb-item text-truncate active">
                <a
                    href="?category=0"
                    data-children-url-parameters="category=0"
                    data-breadcrumb-item
                >
                    {{ __('Service catalog') }}
                </a>
            </li>
        </ol>
        <div class="ms-auto fw-normal d-flex align-items-center">
            <span class="text-muted me-2 fs-3">
                {{ __("Sort by: ") }}
            </span>
            {{ fields.dropdownArrayField(
                'sort_strategy',
                default_sort_strategy,
                sort_strategies|map((value) => value.getLabel()),
                '',
                {
                    'init'               : false,
                    'no_label'           : true,
                    'field_class'        : '',
                    'mb'                 : '',
                    'aria_label'         : __('Sort by'),
                    'templateSelection'  : 'function(data) { return window.GlpiServiceCatalog.getTemplateForSortSelect(data); }',
                    'templateResult'     : 'function(data) { return window.GlpiServiceCatalog.getTemplateForSortSelect(data); }',
                    'add_data_attributes': {
                        'glpi-service-catalog-sort-strategy': '',
                    },
                }
            ) }}
        </div>
        <div class="ms-2 input-icon">
            <input
                class="h-full form-control"
                placeholder="{{ __("Search for forms...") }}"
                data-glpi-service-catalog-filter-items
            >
            <span class="input-icon-addon" style="font-size: 18px;">
                <i class="ti ti-search"></i>
            </span>
        </div>
    </div>
{% endblock content_title %}

{% block content_body %}
    <section
        aria-label="{{ __("Forms") }}"
        class="row mb-5"
        data-glpi-service-catalog-items
    >
        {{ include(
            'components/helpdesk_forms/service_catalog_items.html.twig',
            {
                'category_id': 0,
                'filter': '',
                'items': items.items,
                'total': items.total,
                'current_page': 1,
                'items_per_page': constant('Glpi\\Form\\ServiceCatalog\\ServiceCatalogManager::ITEMS_PER_PAGE'),
                'is_default_search': true,
                'expand_categories': expand_categories,
            },
            with_context = false
        ) }}
    </section>

    <script>

        (async function() {
            const module = await import("/js/modules/Forms/ServiceCatalogController.js");
            const icons = {};
            {% for key, icon in icons %}
                icons["{{ key|escape('js') }}"] = "{{ icon|escape('js') }}";
            {% endfor %}
            window.GlpiServiceCatalog = new module.GlpiFormServiceCatalogController(icons);
        })();
    </script>
{% endblock content_body %}