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

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

{% set scene_left = entity.getHelpdeskSceneId('custom_helpdesk_home_scene_left') %}
{% set scene_right = entity.getHelpdeskSceneId('custom_helpdesk_home_scene_right') %}

{% block content %}
    {# We override the parent width using .force-full-width because we need our background images and colors to bleed
       through and use all the available width. The content is still using the correct width by redefining manually the
       container size for each sections of the page using container-xl/container-narrow classes#}
    <div class="d-flex flex-column helpdesk-home-container force-full-width">
        <div class="search-banner d-flex">
            <div class="scene scene-left">
                {{ render_scene(scene_left) }}
            </div>
            <div class="container-narrow search-banner-content">
                <h1 class="text-center mb-0" data-testid="home-title">
                    {{ entity.getHelpdeskHomeTitle() }}
                </h1>

                {% if entity.isHelpdeskSearchBarEnabled() %}
                    <div id="search-overlay" class="search-overlay bg-dark"></div>
                    <div class="input-icon search-bar-container">
                        <span class="input-icon-addon">
                            <i class="ti ti-search"></i>
                        </span>
                        <input
                            id="search-input"
                            type="text"
                            value=""
                            class="form-control home-search"
                            placeholder="{{ __("Search for knowledge base entries or forms") }}"
                            data-testid="home-search"
                        >
                        <section
                            id="search-results"
                            class="position-absolute search-result-container w-100 d-none"
                            aria-label="{{ __("Search results") }}"
                        >
                        </section>
                    </div>
                {% else %}
                    {# No search area but keep the same size to keep illustrations layout consistent #}
                    <div class="search-bar-container-placeholder"></div>
                {% endif %}
            </div>
            <div class="scene scene-right">
                {{ render_scene(scene_right) }}
            </div>
        </div>
        <section class="tiles-banner" aria-label="{{ __("Quick Access") }}" data-testid="quick-access">
            <div class="container-xl">
                {# Display password alerts #}
                {% if password_alert|length %}
                    <div class="alert alert-warning alert-dismissible bg-white" role="alert">
                        <div class="d-flex mb-2">
                            <div>
                                <i class="ti ti-alert-triangle me-1"></i>
                            </div>
                            <div>
                                {{ password_alert }}
                            </div>
                        </div>

                        <div class="btn-list">
                            <a class="btn btn-outline-warning" href="{{ path('/front/updatepassword.php') }} ">
                                {{ __('Update my password') }}
                            </a>
                        </div>
                    </div>
                {% endif %}

                {# TODO: deprecate this hook and make a new one that doesn't expect a table as a container #}
                <table class="central">
                    {{ call_plugin_hook(constant('Glpi\\Plugin\\Hooks::DISPLAY_CENTRAL')) }}
                </table>

                <div class="row">
                    {% for tile in tiles %}
                        <div class="col-12 col-sm-6 col-md-4 d-flex">
                            <a
                                class="card mx-1 my-2 flex-grow-1"
                                href="{{ tile.getTileUrl() }}"
                            >
                                <section class="card-body">
                                    <div class="d-flex">
                                        <div class="aspect-ratio-1">
                                            {{ render_illustration(tile.getIllustration(), 70) }}
                                        </div>
                                        <div class="ms-4">
                                            <h2 class="card-title mb-2 text-break">
                                                {{ tile.getTitle() }}
                                            </h2>
                                            <div class="text-secondary remove-last-tinymce-margin">
                                                {{ tile.getDescription()|safe_html }}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <div class="tickets-banner">
            <div class="container-xl">
                {{ tabs.showTabsContent() }}
            </div>
        </div>
    </div>

    <script>
        (async function() {
            const module = await import(
                "js/modules/Helpdesk/IndexController.js"
            );
            new module.GlpiHelpdeskIndexController();
        })();
    </script>
{% endblock content %}
