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

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

{% set params = {} %}
{# do not display delete button #}
{% set params = params|merge({'candel': false}) %}
{# do not display footer with dates #}
{% set params = params|merge({'formfooter': false}) %}

{% block form_fields %}
    <style>
        .red-toggle-switch-bg {
            --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d63939'/%3e%3c/svg%3e") !important;
        }
    </style>

    <input type="hidden" name="_update_capacities" value="1" />
    {% for capacity in capacities %}
        {% set label %}
            <span class="d-inline-flex align-items-center">
                <span>{{ capacity.getLabel() }}</span>
                <i class="ms-1 {{ capacity.getIcon() }}"></i>
            </span>
            {% if capacity.getDescription() is not empty %}
                <small class="form-hint">
                    {{ capacity.getDescription() }}
                </small>
            {% endif %}
        {% endset %}
        {% set field %}
            <label class="d-flex align-items-center gap-2 form-check form-switch mt-2">
                <input type="checkbox"
                    name="capacities[]"
                    value="{{ get_class(capacity) }}"
                    class="form-check-input"
                    id="%id%"
                    data-capacity="{{ get_class(capacity) }}"
                    data-is-used="{{ capacity.isUsed(classname) ? 1 : 0 }}"
                    {{ item.hasCapacityEnabled(capacity) ? 'checked' : '' }} />
                <i class="ti ti-alert-circle-filled text-red fs-2 d-none"
                    data-capacity="{{ get_class(capacity) }}"
                    data-bs-toggle="tooltip"
                    title="{{ capacity.getCapacityUsageDescription(classname) }}"></i>
            </label>
        {% endset %}
        {{ fields.field('capacities[]', field, label) }}
    {% endfor %}

    {# Modal #}
    <div class="modal fade" id="capacityWarningModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <a type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _x('button', 'Close') }}"></a>
                <div class="modal-status bg-danger"></div>
                <div class="modal-body text-center py-4">
                    {# SVG Icon corresponding to the ti-alert-triangle icon #}
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>

                    <h3>{{ _x('button', 'Are you sure?') }}</h3>
                    <div class="text-muted">
                        {{ __('You have disabled one or more capacities that are used by assets. Disabling them will result in the deletion of associated data.') }}
                    </div>
                    <div class="list-group list-group-flush list-group-hoverable text-start mt-2">
                        {% for capacity in capacities|filter(capacity => capacity.isUsed(classname)) %}
                            <div class="list-group-item p-3 d-none" data-capacity="{{ get_class(capacity) }}">
                                <div class="row align-items-center">
                                    <div class="col text-truncate ms-6">
                                        <span class="text-reset d-block">{{ capacity.getLabel() }}</span>
                                        <div class="d-block text-red text-truncate">
                                            {{ capacity.getCapacityUsageDescription(classname) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="w-100">
                        <div class="row">
                            <div class="col">
                                <a class="btn w-100" data-bs-dismiss="modal">
                                    {{ _x('button', 'Cancel') }}
                                </a>
                            </div>
                            <div class="col">
                                <button type="button" class="btn btn-danger w-100" name="save">
                                    {{ _x('button', 'Yes, disable it!') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#mainformtable button[type="submit"]').on('click', { is_from_modal: false }, function(event, data) {
                data = data || event.data;

                if (
                    data.is_from_modal !== true
                    && $('input[name="capacities[]"][data-is-used="1"]:not(:checked)').length > 0
                ) {
                    event.preventDefault();
                    $('#capacityWarningModal').modal('show');
                }
            });

            $('#capacityWarningModal button[name="save"]').on('click', function() {
                $('#capacityWarningModal').modal('hide');
                $('#mainformtable button[type="submit"]').trigger(
                    'click',
                    {
                        'is_from_modal': true,
                    }
                );
            });

            $('input[name="capacities[]"]').on('change', function() {
                if ($(this).data('is-used')) {
                    $(this).toggleClass('red-toggle-switch-bg');
                    $('i[data-capacity="' + $.escapeSelector($(this).data('capacity')) + '"]').toggleClass('d-none');
                    $('div[data-capacity="' + $.escapeSelector($(this).data('capacity')) + '"]').toggleClass('d-none');
                }
            });
        });
    </script>

    <style>
        /* To avoid separator on the last visible item but not the last item of the dom */
        div.list-group-item:not(.d-none):last-of-type {
            border-bottom-width: 0 !important;
        }
    </style>
{% endblock %}