{#
 # ---------------------------------------------------------------------
 #
 # 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/>.
 #
 # ---------------------------------------------------------------------
 #}

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

{% set field_options = {
   'full_width': true,
} %}

{% set rand = random() %}

<form class="display-widget-form">

   <input type="hidden" name="gridstack_id" value="{{ gridstack_id }}" />
   <input type="hidden" name="old_id" value="{{ old_id }}" />
   <input type="hidden" name="x" value="{{ x }}" />
   <input type="hidden" name="y" value="{{ y }}" />
   <input type="hidden" name="width" value="{{ width }}" />
   <input type="hidden" name="height" value="{{ height }}" />
   <input type="hidden" name="card_options" value="{{ card_options|json_encode(constant('JSON_HEX_QUOT')) }}" />

   {{ fields.colorField(
      'color',
      color,
      __('Background color'),
      field_options
   ) }}

   {{ fields.dropdownArrayField(
      'card_id',
      card_id,
      list_cards,
      __('Data'),
      field_options|merge({
         'display_emptychoice': not edit
      })
   ) }}

   {# display widget list #}
   {% set widgets_list %}
      <div class="widget-list">
         {% for key, current in widget_types %}
            {% set selected = key == widgettype %}
            {% set w_displayed = edit and card['widgettype'] is defined and key in card['widgettype'] %}

            <input type="radio"
                  {% if selected %}checked="checked"{% endif %}
                  class="widget-select" id="widgettype_{{ key }}_{{ rand }}"
                  name="widgettype"
                  value="{{ key }}" />
               <label for="widgettype_{{ key }}_{{ rand }}"
                      {% if w_displayed %}style="display: inline-block;"{% endif %}>
                  <div>{{ current['label'] }}</div>
                  <img src="{{ current['image'] }}" />
               </label>
         {% endfor %}
      </div>
   {% endset %}

   {% set displayed = edit %}
   <div class="widgettype_field" {% if not displayed %}style="display: none;"{% endif %}>
      {{ fields.field(
         '',
         widgets_list,
         __('Widget'),
         field_options
      ) }}
   </div>

   {% set palette_displayed = edit and (widget_def['haspalette'] ?? false) %}
   {% set palette_disabled  = use_gradient %}
   {% set palettes = call("Glpi\\Dashboard\\Palette::getAllPalettes") %}
    <div class="palette_field" {% if not palette_displayed %}style="display: none;"{% endif %}>
        {% set palette_field %}
            {% set palette_field_id  = "palette_select" ~ random() %}
            {% set gradient_field_id = "use_gradient" ~ random() %}

            <select name="palette" id="{{ palette_field_id }}"
                    {{ palette_disabled ? 'disabled="disabled"' : '' }}>
            {% for palette_id, palette_codes in palettes %}
                <option value="{{ palette_id }}" {% if palette_id == palette|default('tab10') %}selected{% endif %}>
                    {{ palette_id }}
            {% endfor %}
            </select>

            <script>
                $(function() {
                    const palettes = {{ palettes|json_encode|raw }};
                    const palette_template = function(option) {
                        const palette_codes = palettes[option.id] ?? [];
                        let html = '<span class="palette_preview d-inline-flex rounded overflow-hidden m-1" \
                            style="direction: ltr;">';
                        for (const code of palette_codes) {
                            html += '<span class="palette_preview_color flex-fill" \
                            style="background-color: ' + _.escape(code) + '; height: 25px" \
                            title="' + _.escape(option.id) + '"></span>';
                        }
                        html += '</span>';

                        return $(html);
                    };

                    $('#{{ palette_field_id }}').select2({
                        'width': '100%',
                        'templateResult': palette_template,
                        'templateSelection': palette_template,
                        'minimumResultsForSearch': 'Infinity', // no search box
                    });

                    $('#{{ gradient_field_id }}').on('change', function() {
                        const disabled = $(this).is(':checked');
                        $('#{{ palette_field_id }}').prop('disabled', disabled);
                    });
                });
            </script>
        {% endset %}

        {% set gradient_field %}
            {# display checkbox to use gradient palette or not #}
            {% set gradient_displayed = edit and widget_def['gradient']|default(false) %}
            <div class="gradient_field" {% if not gradient_displayed %}style="display: none;"{% endif %}>
                <div class="form-check">
                    <input type="hidden" name="use_gradient" value="0" />
                    <input type="checkbox"
                           name="use_gradient"
                           class="form-check-input"
                           id="{{ gradient_field_id }}"
                           {{ use_gradient == 1 ? 'checked' : '' }}
                           value="1">
                    <label class="form-check-label" for="{{ gradient_field_id }}">
                        {{ __('Use gradient palette') }}
                        <span class="form-help"
                              data-bs-toggle="tooltip"
                              data-bs-placement="top"
                              data-bs-title="{{ __("generate a palette from the background color") }}">
                            ?
                        </span>
                    </label>
                </div>
            </div>
        {% endset %}

        {{ fields.htmlField(
            'palette',
            palette_field,
            __('Use palette'),
            field_options|merge({
                add_field_html: gradient_field
            })
        ) }}
    </div>

   {# display checkbox to use point label or not #}
   {% set point_labels_displayed = edit and widget_def['pointlbl']|default(false) %}
   <div class="pointlbl_field" {% if not point_labels_displayed %}style="display: none;"{% endif %}>
      {{ fields.checkboxField(
         'point_labels',
         point_labels,
         __('Display value labels on points/bars'),
         field_options
      ) }}
   </div>

   {# display checkbox to display labels or not #}
   {% set labels_displayed = edit and widget_def['labels']|default(false) %}
   <div class="label_field" {% if not labels_displayed %}style="display: none;"{% endif %}>
      {{ fields.checkboxField(
         'labels',
         labels,
         __('Show labels on chart'),
         field_options
      ) }}
   </div>

   {# display checkbox to display legend or not #}
   {% set legend_displayed = edit and widget_def['legend']|default(false) %}
   <div class="label_field" {% if not legend_displayed %}style="display: none;"{% endif %}>
      {{ fields.checkboxField(
         'legend',
         legend,
         __('Show legend'),
         field_options
      ) }}
   </div>

   {# show limit #}
   {% set limit_displayed = edit and widget_def['limit']|default(false) %}
   <div class="limit_field" {% if not limit_displayed %}style="display: none;"{% endif %}>
      {{ fields.numberField(
         'limit',
         limit,
         __('Limit number of data'),
         field_options
      ) }}
   </div>

   <div class="modal-footer">
      <button type="submit" class="btn btn-primary {{ edit ? 'edit-widget' : 'add-widget' }}">
         {% if edit %}
            <i class="ti ti-device-floppy"></i>
            <span>{{ _x('button', 'Update') }}</span>
         {% else %}
            <i class="ti ti-plus"></i>
            <span>{{ _x('button', 'Add') }}</span>
         {% endif %}
      </button>
   </div>

</form>
