{% import 'macros/form.html' as form %}

{% asset "file_upload_widget/css" %}
{% asset "file_upload_widget/js" %}


{% set attrs = field.get('form_attrs', {}) %}
{% set accept = field.get('accept', '*') %}
{% set widget_id = h.fuw_generate_uuid() %}

<div
    class="form-group control-medium file-upload-widget"
    data-module="file-upload-widget"
    data-module-instance-id="{{ widget_id }}"
    {{ form.attributes(attrs) }}>
    <label class="form-label" for="fuw-file-{{ widget_id }}">
        {% if field.required %}<span title="{{ _("This field is required") }}" class="control-required">*</span> {% endif %}
        {{ h.scheming_language_text(field.label) }}
    </label>

    <div class="controls">
        <button
            type="button"
            class="btn btn-primary d-flex fuw-upload-btn"
            data-bs-toggle="modal" data-bs-target="#uploadWidget-{{ widget_id }}"
            data-toggle="modal" data-target="#uploadWidget-{{ widget_id }}"
            >
            {{ _("Upload") }}

            <span class="fuw-uploaded-files-counter hidden">0</span>
        </button>

        <input id="fuw-file-{{ widget_id }}" type="file" placeholder="" style="display: none" accept="{{ accept }}">
        <input id="fuw-value-{{ widget_id }}" class="fuw-value-input" type="hidden" name="{{ field.field_name }}" value="{{ data[field.field_name] or '' }}" placeholder="" style="display: none">

        {%- if field.help_text -%}
            {% set text = h.scheming_language_text(field.help_text) %}
            {{ form.info(
                text=text|safe if field.get('help_allow_html', false) else text,
                inline=field.get('help_inline', false))
            }}
        {%- endif -%}
    </div>

    <div class="modal fade" tabindex="-1" id="uploadWidget-{{ widget_id }}" >
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="fa-solid fa-angles-left fuw-cancel-btn hidden"></i>
                    <button type="button" class="btn btn-outline-primary btn-sm fuw-open-selected-btn hidden">{{ _("Selected files:") }} <span>0</span></button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- MAIN WINDOW -->
                    <div class="fuw-main-window">
                        <div class="fuw-main-window__dropzone">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>{{ _("Drag and drop files here") }}</span>
                        </div>
                        <div class="fuw-main-window__alternative">
                            <p class="fuw-or">{{ _("OR") }}</p>
                            <label for="fuw-file-{{ widget_id }}" class="btn btn-primary btn-file-input">
                                {{ _("Browse files") }}
                            </label>
                            <button type="button" class="btn btn-primary btn-url-input">{{ _("URL") }}</button>
                            <button type="button" class="btn btn-primary btn-media-input">{{ _("Media gallery") }}</button>
                        </div>
                    </div>

                    <!-- URL INPUT WINDOW -->
                    <div class="fuw-url-input hidden">
                        <input
                            type="url"
                            required
                            disabled
                            aria-label="Enter URL to import a file"
                            placeholder="Enter URL to import a file" class="form-control"
                        >
                        <button type="button" class="btn btn-primary float-end mt-3 btn-url-import">{{ _("Import") }}</button>
                    </div>

                    <!-- MEDIA GALLERY WINDOW -->
                    <div class="fuw-media-input hidden">
                        <div class="search-input">
                            <input
                                aria-label="Search files..."
                                type="search" class="form-control input-lg fuw-media-input--search"
                                value=""
                                autocomplete="off"
                                placeholder="Search files..."
                                disabled
                            >

                            <span class="input-group-btn">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>

                        <ul class="fuw-media-input--files"></ul>

                        <div class="fuw-media-input--empty">
                            <p>{{ _("No files found") }}</p>
                        </div>
                    </div>
                </div>

                <div class="modal-footer modal-footer--media hidden">
                    <button type="button" class="btn btn-primary fuw-media-select-btn">{{ _("Select") }} <span>0</span></button>
                    <button type="button" class="btn btn-black btn-cancel-file-select">{{ _("Cancel") }}</button>
                </div>
            </div>

            <!-- SELECTED FILES -->
            <div class="modal-content fuw-selected-files hidden">
                <div class="modal-header">
                    <i class="fa-solid fa-angles-left fuw-close-selected-btn"></i>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <ul class="fuw-selected-files--list list-unstyled">
                    </ul>
                </div>

                <div class="modal-footer modal-footer--selected">
                    <button type="button" class="btn btn-danger fuw-discard-btn">{{ _("Discard") }}</button>
                    <button type="button" class="btn btn-primary fuw-upload-all-btn">{{ _("Upload all") }}</button>
                </div>
            </div>
        </div>
    </div>
</div>