{% if isDropzoneAlt is not defined %}
    {% set isDropzoneAlt = true %}
{% endif %}
{% if labelName is defined %}
    <label class="col-lg-2 col-form-label text-lg-right">{{ labelName|default }}:</label>
{% endif %}
{% if options.maxFilesize is not defined %}
    {% set options = options|default([])|merge({maxFilesize: 5}) %}
{% endif %}
{% if options.maxFiles is not defined %}
    {% set options = options|merge({maxFiles: 1}) %}
{% endif %}
<div class="dropzone dropzone-queue" id="dz-{{ name }}" data-options="{{ options|json_encode|raw|e('html_attr') }}" data-files="{{ files|json_encode|raw|e('html_attr') }}">
    {#<input
            type="text"
            name="{{ (multipleDropzone is defined and multipleDropzone)
            ? 'settings[' ~ (name|default('')) ~ '][imageDimensions]'
            : 'imageDimensions' }}"
            value="{{ dimensions|default }}"
            class="form-control form-control-sm rounded-0 mb-2"
            placeholder="Alt"
            aria-label="Alt"
    />#}
    <div class="dropzone-panel mb-lg-0 mb-2">
        <a class="dropzone-select btn btn-sm btn-primary mb-2">{{ dimensions|default ? 'Resim Yükle' : 'Dosya Yükle' }}</a>
        <div class="d-flex flex-column">
            <div class="d-flex align-items-center form-text">
                <span class="bullet bullet-line me-2"></span>
                <p class="mb-0">En fazla <b>{{ options.maxFilesize }}</b> MB boyutunda,
                    <b>{{ options.maxFiles }}</b> {{ dimensions|default ? 'resim' : 'dosya' }} yükleyebilirsiniz</p>
            </div>
            {% if dimensions is defined %}
                <div class="d-flex align-items-center form-text">
                    <span class="bullet bullet-line me-2"></span>
                    <p class="mb-0">Resimler <b>{{ dimensions }}</b> ebatında olmalıdır</p>
                </div>
            {% endif %}
        </div>
    </div>
        <div class="dropzone-items">
        <template>
            <div class="dropzone-item flex-column bg-transparent border p-0">
                <div class="w-100 d-flex p-3 bg-gray-100">
                    <div class="dropzone-file">
                        <div class="dropzone-filename" title="some_image_file_name.jpg">
                            <strong>(<span data-dz-size>340kb</span>)</strong>
                            <div data-dz-name>some_image_file_name.jpg</div>
                            <div class="dropzone-error" data-dz-errormessage></div>
                        </div>
                    </div>
                    <div class="dropzone-toolbar">
                        <span class="dropzone-delete" data-dz-remove><i class="bi bi-x fs-1"></i></span>
                    </div>
                </div>
                <div class="d-flex p-3 w-100">
                    <img src="" class="align-self-start me-4 rounded-2 width_60px" alt="" data-dz-thumbnail />
                    {% if isDropzoneAlt %}

                        <div class="dropzone-form flex-grow-1">
                            <ul class="nav nav-tabs nav-line-tabs mb-4">
                                {% for lang in getLangs() %}
                                    <li class="nav-item">
                                        <a class="nav-link py-0 {{ loop.first ? 'active' }}" data-bs-toggle="tab" href="#dz-tab-{{ name~'-sections_0_dropzones_0_-'~lang.shortTitle }}">{{ lang.shortTitle|upper }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <div class="tab-content" id="dz-tab-{{ name }}-content">
                                {% for lang in getLangs() %}
                                    <div class="tab-pane fade {{ loop.first ? 'show active' }}" id="dz-tab-{{ name~'-sections_0_dropzones_0_-'~lang.shortTitle }}" data-lang="{{ lang.shortTitle }}" role="tabpanel">
                                        <input type="text" name="{{ (multipleDropzone is defined and multipleDropzone)
                                        ? ('childs' ~ sectionId|default('') ~ '[' ~ childIndex ~ '][langs]')
                                        ~ '[' ~ (loop.index - 1) ~ ']'
                                        : 'child[langs][' ~ (lang.shortTitle) ~ ']'
                                        }}{{ (multipleDropzoneInOneSection is defined and multipleDropzoneInOneSection) ? '['~ name|remove_digits ~']' : ''  }}[alt]{{ options.maxFiles > 1 ? '[]' : '' }}" class="form-control form-control-sm rounded-0 mb-2" placeholder="Alt" aria-label="Alt">
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    {% if isPdf is defined and isPdf %}
                        <input type="hidden" name="{{ (multipleDropzone is defined and multipleDropzone)
                        ? ('childs' ~ sectionId|default('') ~ '[' ~ childIndex ~ '][langs]')
                        ~ '[' ~ (loop.index - 1) ~ ']'
                        : 'child[langs][' ~ (lang.shortTitle) ~ ']'
                        }}{{ (multipleDropzoneInOneSection is defined and multipleDropzoneInOneSection) ? '['~ name|remove_digits ~']' : ''  }}[pdf]{{ options.maxFiles > 1 ? '[]' : '' }}" value="1" class="form-control form-control-sm rounded-0 mb-2" placeholder="Alt" aria-label="Alt">
                    {% endif %}
                </div>
            </div>
        </template>
    </div>
</div>