{% import "admin/Macros/Buttons/_button.html.twig" as button %}


<div class="row">

    <div class="col-12 ">

        <div class="fv-row mb-10">
            <label class="col-lg-2 col-form-label text-lg-right">Ana Resim:</label>
            <div class="dropzone text-start" id="productMainImage">
                <div class="dz-message needsclick">
                    <i class="ki-duotone ki-file-up fs-3x text-primary">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                    <div class="ms-4">
                        <h3 class="fs-5 fw-bold text-gray-900 mb-1">Resim eklemek için tıklayın veya resmi bu alana sürükleyin</h3>
                        <span class="fs-7 fw-semibold text-gray-500">Yalnızca <b>1</b> dosya ekleyebilirsiniz</span>
                    </div>
                </div>
                <div class="dropzone-items"></div>
            </div>
        </div>
    </div>


</div>

<button type="submit" class="btn btn-light-primary"><i class="fas fa-save"></i> Aktar </button>


<template id="dropzoneItem">
    <div class="row align-items-center border-bottom-1 border-bottom-dashed border-gray-300 mx-0 py-3 dropzone-item">
        <div class="col-auto">
            <img src="" alt="" data-dz-thumbnail>
        </div>
        <div class="col">
            <div class="row align-items-center">
                <div class="col-6">
                    <small class="text-muted">(<span data-dz-size>340kb</span>)</small>
                    <p class="text-truncate fw-medium mb-0" data-dz-name>no-image.png</p>
                </div>
                <div class="col">
                    <input type="text" placeholder="Resim Başlık" class="form-control form-control-solid form-control-sm" aria-label="Başlık">
                </div>
                <div class="col-auto">
                    <i class="ki-duotone ki-cross-square align-middle fs-1 cursor-pointer" data-dz-remove>
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
                <div class="col-12">
                    <small class="d-block mt-3 text-danger" data-dz-errormessage></small>
                </div>
            </div>
        </div>
    </div>
</template>