{% use "bootstrap_5_layout.html.twig" %}

{% block searchable_entity_widget %}
    {{- block('choice_widget') -}}
    <script>
        $(document).ready(function() {
            $("#{{ id }}").select2({
                ajax: {
                    url: '{{ path(search_api_path) }}',
                    dataType: 'json',
                    delay: {{ ajax_delay }},
                    data: function (params) {
                        return {
                            searchText: params.term, // search term
                            page: params.page || 1
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                },
                escapeMarkup: function (markup) {
                    return markup;
                },
                minimumInputLength: {{ ajax_minimum_input_length }},
                templateResult: function (repo) {

                    let response = '';

                    if (repo.loading) {
                        response = repo.text;
                    } else if (repo.id) {
                        response =
                            '<div class="select2-result-repository clearfix d-flex justify-content-between">' +
                            '<div class="select2-result-repository__avatar">' + repo.id + '</div>' +
                            '<div class="select2-result-repository__title">' + repo.title + '</div>' +
                            '</div>';
                    }

                    return response;
                },
                templateSelection: function (repo) {
                    return repo.text;
                }
            });

        });
    </script>
{% endblock %}

{% block date_range_widget %}
    <div class="input-group">
        {{- block('form_widget_simple') -}}
        {% if show_clear_button is defined and show_clear_button %}
            <div class="input-group-text cursor-pointer date_range_reset" id="date_range_reset" data-bs-id="{{ id }}"><i class="ph-x-circle text-danger"></i></div>
        {% endif %}
    </div>
    <script>
        $(document).ready(function (){
            let dp = $('#{{ id }}');

            let timeFormat = {% if is_datetime %}'YYYY-MM-DD HH:mm:ss'{% else %}'YYYY-MM-DD'{% endif %};
            let timePicker = {% if is_datetime %}true{% else %}false{% endif %};

            dp.daterangepicker({
                parentEl: '.content-inner',
                timePicker: timePicker,
                timePicker24Hour: true,
                locale: {
                    format: timeFormat,
                    cancelLabel: 'Clear'
                },
                autoUpdateInput: false
            });

            dp.on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format(timeFormat) + ' - ' + picker.endDate.format(timeFormat));
            });

            dp.on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });
    </script>
{% endblock %}

{% block datetime_widget %}
    <div class="input-group">
        {{- block('form_widget_simple') -}}
        {% if show_clear_button is defined and show_clear_button %}
            <div class="input-group-append" id="clearDateRangeButton">
                <div class="input-group-text cursor-pointer" id="date_range_reset" onclick="clearFormField('{{ id }}')"><i class="ph-x-circle text-danger"></i></div>
            </div>
        {% endif %}
    </div>

    <script>
        $(document).ready(function (){
            $('#{{ id }}').daterangepicker({
                parentEl: '.content-inner',
                singleDatePicker: true,
                timePicker: true,
                timePickerSeconds: true,
                timePicker24Hour: true,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss'
                }
            });
        });
    </script>
{% endblock %}

{% block checkbox_widget %}
    <div class="form-check form-check-inline form-switch">
        <input type="checkbox" {{ block('widget_attributes') }} class="form-check-input" id="{{ id }}" {% if value is defined %} value="{{ value }}"{% endif %} {% if checked %} checked="checked"{% endif %} />
        <label class="form-check-label" for="{{ id }}">{{ label|trans({}, translation_domain) }}</label>
    </div>
{% endblock checkbox_widget %}