{% block dropzone_widget -%}
    {%- set dataController = (attr['data-controller']|default('') ~ ' symfony--ux-dropzone--dropzone')|trim -%}
    {%- set attr = attr|merge({'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}

    <div class="dropzone-container" data-controller="{{ dataController }}">
        <input type="file" {{ block('widget_attributes') }} data-symfony--ux-dropzone--dropzone-target="input" />

        <div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder">
            {%- 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 -%}
        </div>

        <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
            <button class="dropzone-preview-button" type="button"
                    data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>

            <div class="dropzone-preview-image" style="display: none"
                 data-symfony--ux-dropzone--dropzone-target="previewImage"></div>

            <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
        </div>
    </div>
{%- endblock %}