{#{% 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 %}#}
{#{% if options.multipleDropzoneInOneSection is defined %}#}
{#    {% set multipleDropzoneInOneSection = options.multipleDropzoneInOneSection %}#}
{#{% endif %}#}
{#{% if options.dimensions is defined %}#}
{#    {% set dimensions = options.dimensions %}#}
{#{% endif %}#}
{#<div class="dropzone new-generation-dropzone dropzone-queue" id="dz-{{ name }}" data-options="{{ options|json_encode|raw|e('html_attr') }}" data-files="">#}
{#    <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 />#}
{#                    <div class="dropzone-form flex-grow-1 mt-1">#}
{#                        <div class="d-flex align-items-center form-text column-gap-2 mt-0">#}
{#                            <span class="bullet bullet-line me-2"></span>#}
{#                            <label class="form-text lang-select-label" for="exampleSelect">Lütfen herhangi bir dilde gözükmesini istiyorsanız seçin :</label>#}
{#                            <select id="langSelect" name="langSelect">#}
{#                                {% for lang in langs %}#}
{#                                    {% set isSelected = lang == 'tr' ? 'selected' : '' %}#}
{#                                    <option value="{{ lang }}" {{ isSelected }}>{{ lang|upper }}</option>#}
{#                                {% endfor %}#}
{#                            </select>#}
{#                        </div>#}

{#                        {% if isDropzoneAlt %}#}
{#                            <ul class="nav nav-tabs nav-line-tabs mb-4">#}
{#                                {% for lang in langs %}#}
{#                                    <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 }}">{{ lang|upper }}</a>#}
{#                                    </li>#}
{#                                {% endfor %}#}
{#                            </ul>#}
{#                            <div class="tab-content" id="dz-tab-{{ name }}-content">#}
{#                                {% for lang in langs %}#}
{#                                    <div class="tab-pane fade {{ loop.first ? 'show active' }}" id="dz-tab-{{ name~'-sections_0_dropzones_0_-'~lang }}" data-lang="{{ lang }}" role="tabpanel">#}
{#                                        <input type="text" name="{{ (multipleDropzone is defined and multipleDropzone)#}
{#                                        ? ('childs' ~ sectionId|default('') ~ '[' ~ childIndex ~ '][langs]')#}
{#                                        ~ '[' ~ (loop.index - 1) ~ ']'#}
{#                                        : 'child[langs][' ~ (lang) ~ ']'#}
{#                                        }}{{ (multipleDropzoneInOneSection is defined and multipleDropzoneInOneSection) ? '['~ '' ~']' : ''  }}[alt]{{ options.maxFiles > 1 ? '[]' : '' }}" class="form-control form-control-sm rounded-0 mb-2" placeholder="Alt" aria-label="Alt">#}
{#                                    </div>#}
{#                                {% endfor %}#}
{#                            </div>#}
{#                        {% endif %}#}
{#                    </div>#}
{#                    {% 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) ? '['~ '' ~']' : ''  }}[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>#}






{#  New #}

{% set isDropzoneAlt = isDropzoneAlt is defined ? isDropzoneAlt : true %}
{% set options = options|default({}) %}
{% set options = options|merge({
    maxFilesize: options.maxFilesize|default(5),
    maxFiles: options.maxFiles|default(1)
}) %}
{% set multipleDropzoneInOneSection = options.multipleDropzoneInOneSection|default(false) %}
{% set dimensions = options.dimensions|default(null) %}

{% if labelName is defined %}
    <label class="col-lg-2 col-form-label text-lg-right">{{ labelName }}:</label>
{% endif %}

<div class="dropzone new-generation-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="hidden" name="{{ 'dropzones[' ~ name ~ ']name ' }}" value="{{ name|default }}">


    <div class="dropzone-panel mb-lg-0 mb-2">
        <a class="dropzone-select btn btn-sm btn-primary mb-2">{{ dimensions ? '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 ? 'resim' : 'dosya' }} yükleyebilirsiniz</p>
            </div>
            {% if dimensions %}
                <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="">
                            <strong>(<span data-dz-size>0kb</span>)</strong>
                            <div data-dz-name></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 />
                    <div class="dropzone-form flex-grow-1 mt-1">
                        <input type="hidden" name="{{ 'dropzones[' ~ name ~ '][dims] ' }}" value="{{ options.dimensions|preparingForResolutionArray }}">
                        <input type="hidden" name="{{ 'dropzones[' ~ name ~ '][additionalPath] ' }}" value="{{ additionalPath|default }}">

                        <div class="d-flex align-items-center form-text column-gap-2 mt-0">
                            <span class="bullet bullet-line me-2"></span>
                            <label class="form-text lang-select-label" for="exampleSelect">Lütfen herhangi bir dilde gözükmesini istiyorsanız seçin :</label>
                            <select id="langSelect" name="{{ 'dropzones[' ~ name ~ '][langSelect]' }}">
                                <option value="all" selected>ALL</option>
                                {% for lang in langs %}
                                    {% set isSelected = lang == 'tr' ? 'selected' : '' %}
                                    <option value="{{ lang }}">{{ lang|upper }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% if isDropzoneAlt %}
                            <ul class="nav nav-tabs nav-line-tabs mb-4">
                                {% for lang in langs %}
                                    <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 }}">{{ lang|upper }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <div class="tab-content">
                                {% for lang in langs %}
                                    <div class="tab-pane fade {{ loop.first ? 'show active' }}"
                                         id="dz-tab-{{ name~'-sections_0_dropzones_0_-'~lang }}" data-lang="{{ lang }}">

                                        {# Alt input#}
                                        <input type="text"
                                               name="{{ 'dropzones[' ~ name ~ '][langs][' ~ (lang) ~ '][alt]' ~ (options.maxFiles > 1 ? '[]' : '') ~ ' ' }}"
                                               class="form-control form-control-sm rounded-0 mb-2"
                                               placeholder="Alt"
                                               aria-label="Alt">

                                        {# Title input#}
                                        <input type="text"
                                               name="{{ 'dropzones[' ~ name ~ '][langs][' ~ (lang) ~ '][title]' ~ (options.maxFiles > 1 ? '[]' : '') ~ ' ' }}"
                                               class="form-control form-control-sm rounded-0 mb-2"
                                               placeholder="Title"
                                               aria-label="Title">
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>