{% trans_default_domain 'admin' %}

{% block admin_polygon_type_row %}
    <fieldset class="card mb-3" id="{{ form.vars.id }}">
        <div class="card-header py-2">
            <h3 class="card-title">{{ form.vars.label|default(form.vars.name)|trans|capitalize }}</h3>
        </div>
        <div class="card-body h-auto">
            {% if form.vars.image %}
                <canvas class="img-fluid" data-href="{{ form.vars.image }}" data-coords="{{ form.vars.value }}"></canvas>
            {% else %}
                Нет изображения для разметки
            {% endif %}
        </div>
        <div class="card-footer d-flex gap-3">
            {{ form_widget(form) }}
            <div class="col-auto text-dark small">
                <div class="font-weight-medium">Управление разметкой</div>
                <div class="lh-sm mb-0">
                    Левая кнопка мыши &mdash; <span class="fst-italic">Поставить точку для разметки</span><br>
                    Правая кнопка мыши &mdash; <span class="fst-italic">Убрать все точки на плане</span><br>
                    Правая кнопка мыши на точке &mdash; <span class="fst-italic">Убрать точку</span>
                </div>
            </div>
        </div>
        <script>
            window.addEventListener('DOMContentLoaded', function () {
                webmotor.container.get('admin_components_polygon').render(
                    document.querySelector('#{{ form.vars.id }} canvas'), function (points) {
                        document.querySelector('#{{ form.vars.id }} textarea').value = points.map(value => [value.x, value.y].join(',')).join(',');
                    }
                );
            });
        </script>
    </fieldset>
{% endblock %}

{% block admin_labels_type_row %}
    <fieldset class="card mb-3" id="{{ form.vars.id }}">
        <div class="card-header py-2">
            <h3 class="card-title">{{ form.vars.label|default(form.vars.name)|trans|capitalize }}</h3>
        </div>
        <div class="card-body h-auto">
            {% if form.vars.image %}
                <canvas class="img-fluid" data-href="{{ form.vars.image }}" data-coords="{{ form.vars.value }}"></canvas>
            {% else %}
                Нет изображения для разметки
            {% endif %}
        </div>
        <div class="card-footer d-flex gap-3">
            {{ form_widget(form) }}
            <div class="col-auto text-dark small">
                <div class="font-weight-medium">Управление разметкой</div>
                <div class="lh-sm mb-0">
                    Левая кнопка мыши &mdash; <span class="fst-italic">Поставить точку для разметки</span><br>
                    Правая кнопка мыши &mdash; <span class="fst-italic">Убрать все точки на плане</span><br>
                    Правая кнопка мыши на точке &mdash; <span class="fst-italic">Убрать точку</span>
                </div>
            </div>
        </div>
        <script>
            window.addEventListener('DOMContentLoaded', function () {
                webmotor.container.get('admin_components_labels').render(
                    document.querySelector('#{{ form.vars.id }} canvas'), function (points) {
                        document.querySelector('#{{ form.vars.id }} textarea').value = points.map(value => [value.x, value.y].join(',')).join(',');
                    }
                );
            });
        </script>
    </fieldset>
{% endblock %}

{% block admin_react_widget_library_widget %}
    <div id="{{ form.vars.id }}" data-context="{{ react_context|json_encode }}"></div>

    <script>
        window.addEventListener('DOMContentLoaded', function () {
            webmotor.container.get('admin_components_widget_library').render(
                document.getElementById('{{ form.vars.id }}')
            );
        });
    </script>
{% endblock %}

{% block admin_collection_type_row %}
    <fieldset class="card mb-4" id="{{ form.vars.id }}">
        <div class="card-header py-2">
            <h3 class="card-title">{{ form.vars.label|default(form.vars.name)|trans|capitalize }}</h3>
        </div>
        <div class="card-body" data-index="{{ form.children|length }}">
            {% for child in form.children %}
                {% if form.vars.allow_delete %}
                    <div class="card mb-3">
                        <div class="card-body">
                            {{ form_widget(child) }}
                        </div>

                        <div class="card-footer text-end">
                            <a href="#" class="btn btn-danger btn-sm" data-action="delete">Удалить</a>
                        </div>
                    </div>
                {% else %}
                    {{ form_widget(child) }}
                {% endif %}
            {% endfor %}
        </div>

        {% if form.vars.allow_add %}
            <div class="card-footer">
                <a href="#" class="btn btn-primary" data-action="add">
                    {{ 'admin.collection.collection_form.add_element'|trans }}
                </a>
            </div>
        {% endif %}

        <template id="{{ form.vars.id }}_prototype">
            {% if form.vars.allow_add %}
                <div class="card mb-3">
                    <div class="card-body">
                        {{ form_widget(form.vars.prototype) }}
                    </div>
                    {% if form.vars.allow_delete %}
                        <div class="card-footer text-end">
                            <a href="#" class="btn btn-danger btn-sm" data-action="delete">Удалить</a>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </template>

        {% if form.vars.allow_add %}
            <script>
                var callback = function () {
                    webmotor.container.get('admin_components_collection').render(
                        document.getElementById('{{ form.vars.id }}'),
                        document.getElementById('{{ form.vars.id }}_prototype')
                    );
                }

                if (document.readyState === "complete" || document.readyState === "interactive") {
                    callback();
                } else {
                    window.addEventListener('DOMContentLoaded', callback);
                }
            </script>
        {% endif %}
    </fieldset>
{% endblock %}

{% block admin_image_type_widget -%}
    {% set upload_input_id =  form.file.vars.id  %}
    {% set image_preview_id = form.vars.id ~ '_image_preview'  %}
    {% set default_image_url = asset('build/admin/images/logo-icon.svg') %}

    <div class="card">
        <div class="row row-0">
            <div class="col-auto bg-dark-lt">
                <img src="{{ form.file.vars.data.url|default(default_image_url)  }}" id="{{ image_preview_id }}"  class="rounded-start object-cover" alt="" width="110" height="110">
            </div>
            <div class="col">
                <div class="card-body">
                    <div class="row">
                        {{ form_widget(form) }}
                    </div>

                    {% if form.file.vars.data and form.file.vars.data and form.file.vars.data.url is defined %}
                        <div class="d-flex gap-1">
                            <a href="{{ form.file.vars.data.url }}" class="btn btn-outline-blue btn-sm" download>
                                Скачать
                            </a>
                            <a href="{{ form.file.vars.data.url }}" class="btn btn-outline-blue btn-sm" target="_blank">
                                Посмотреть
                            </a>
                            <input type="text" value="{{ form.file.vars.data.url }}" class="form-control disabled" readonly>
                        </div>

                        {{ form_errors(form.file) }}
                    {% endif %}
                </div>
            </div>
        </div>

        <script>
            var callback = function () {
                ;(function (upload_input, image_preview) {
                    upload_input.addEventListener('change', ({ target }) => {
                        if (target.files.length > 0) {
                            const file = target.files.item(0);

                            if (file.type.indexOf('image') !== -1) {
                                return image_preview.src = URL.createObjectURL(file)
                            }
                        }

                        return image_preview.src = '{{ default_image_url }}';
                    })
                }(
                    document.querySelector('#{{ upload_input_id }}'),
                    document.querySelector('#{{ image_preview_id }}'),
                ));
            }

            if (document.readyState === "complete" || document.readyState === "interactive") {
                callback();
            } else {
                window.addEventListener('DOMContentLoaded', callback);
            }
        </script>
    </div>
{% endblock %}

{% block admin_file_type_widget -%}
    {%- set type = type|default('file') -%}
    {%- set attr = attr|merge({ class: (attr.class|default('') ~ ' form-control')|trim }) -%}
    {%- set delete_options = {
        attr: {
            class: 'btn-check d-none'
        },
        label_attr: {
            class: 'btn btn-danger',
            onclick: 'confirm(\'Вы действительно хотите удалить?\')'
        }
    } -%}

    {%- set file_upload_id = form.vars.id  ~ '_upload' -%}
    {%- set file_recovery_id = form.vars.id  ~ '_recovery' -%}

    <div class="d-flex gap-1" id="{{ file_upload_id }}">
        {{ form_widget(form.file, { attr: attr }) }}

        {% if form.delete is defined %}
            {{ form_widget(form.delete, delete_options) }}
        {% endif %}
    </div>

    {% if form.delete is defined %}
        <div class="text-center d-none" id="{{ file_recovery_id }}">
            <button type="button" class="btn border border-secondary w-100">Восстановить удаленный файл</button>
        </div>

        <script>
            var callback = function () {
                webmotor.container.get('admin_components_file').render(
                    document.querySelector('#{{ form.delete.vars.id }}'),
                    document.querySelector('#{{ file_recovery_id }} > button'),
                    document.querySelector('#{{ file_upload_id }}'),
                    document.querySelector('#{{ file_recovery_id }}')
                );
            };

            if (document.readyState === "complete" || document.readyState === "interactive") {
                callback();
            } else {
                window.addEventListener('DOMContentLoaded', callback);
            }
        </script>
    {% endif %}

    {%- set label_attr = label_attr|merge({ class: (label_attr.class|default('') ~ ' form-label')|trim }) -%}

    <label for="{{ form.vars.id }}" {% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>
        {%- if attr.placeholder is defined and attr.placeholder is not none -%}
            {{- translation_domain is same as(false) ? attr.placeholder : attr.placeholder|trans({}, translation_domain) -}}
        {%- endif -%}
    </label>
{% endblock %}

{% block admin_file_list_type_widget %}
    {% set file_list_container_id = form.vars.id %}

    {% set prototype = { base_id: form.vars.prototype.vars.id,base_name: form.vars.prototype.vars.full_name } %}

    <div id="{{ file_list_container_id }}"
         data-context="{{ react_context|json_encode }}"
         data-prototype="{{ prototype|json_encode }}"></div>

    <script>
        var callback = function () {
            webmotor.container.get('admin_components_file_list').render(
                document.getElementById('{{ file_list_container_id }}')
            );
        };

        if (document.readyState === "complete" || document.readyState === "interactive") {
            callback();
        } else {
            window.addEventListener('DOMContentLoaded', callback);
        }
    </script>
{% endblock %}