{% macro custom(name, ops = {}, label, dims) %}
    {% if ops.maxFilesize is not defined %}
        {% set ops = ops|merge({maxFilesize: 1}) %}
    {% endif %}
    {% if ops.maxFiles is not defined %}
        {% set ops = ops|merge({maxFiles: 1}) %}
    {% endif %}
    <div class="dropzone dropzone-queue" id="dz-{{ name }}" data-ops="{{ ops|json_encode|raw|e('html_attr') }}">
        <div class="dropzone-panel mb-lg-0 mb-2">
            <a class="dropzone-select btn btn-sm btn-primary me-2">{{ label ?? 'Dosya Yükle' }}</a>
            <span class="form-text text-muted">En fazla {{ ops.maxFilesize }}MB boyutunda {{ dims ? 've '~dims~' ebatlarında' }} {{ ops.maxFiles }} dosya yükleyebilirsiniz</span>
        </div>
        <div class="dropzone-items wm-200px">
            <template>
                <div class="dropzone-item align-items-start flex-wrap">
                    <img src="" class="me-3 rounded-2" alt="" data-dz-thumbnail />
                    <div class="dropzone-form flex-grow-1">
                        <ul class="nav nav-tabs nav-line-tabs mb-3">
                            {% 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~'-'~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~'-'~lang.shortTitle }}" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <input type="text" name="{{ name~'['~lang.shortTitle~']' }}[title]" class="form-control form-control-sm rounded-0 mb-2" placeholder="Başlık" aria-label="Başlık">
                                        </div>
                                        <div class="col-lg-6">
                                            <input type="text" name="{{ name~'['~lang.shortTitle~']' }}[link]" class="form-control form-control-sm rounded-0" placeholder="Link" aria-label="Link">
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="w-100 d-flex mt-3">
                        <div class="dropzone-file d-flex">
                            <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>
            </template>
        </div>
    </div>
{% endmacro %}