<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Фотографии</h5>
</div>
<div class="card-body">
<div class="mb-4">
<h5 class="fs-15 mb-1">Основное изображение</h5>
<p class="text-muted">Добавьте основное изображение.</p>
<div class="text-center">
<div class="position-relative d-inline-block">
<div class="position-absolute top-100 start-100 translate-middle">
<label for="xf_poster" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Выбрать изображение">
<div class="avatar-xs">
<div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
<i class="ri-image-fill"></i>
</div>
</div>
</label>
<input class="form-control d-none" type="file" name="xfield[poster]" id="xf_poster" data-alert="poster" value="" accept="image/png, image/gif, image/jpeg">
</div>
<div class="avatar-lg">
<div class="avatar-title bg-light rounded">
<img src="" id="product-img" class="avatar-md h-auto" />
</div>
</div>
</div>
</div>
</div>
<div>
<h5 class="fs-15 mb-1">Галерея блюд</h5>
<p class="text-muted">Добавьте галерею изображений блюда (макс. 4 шт.).</p>
<div class="dropzone">
<div class="fallback">
<input type="file" name="xfield[nuotraukos]" id="xf_nuotraukos" data-alert="Фотографии" multiple="multiple" accept="image/jpeg, image/png, image/gif, image/webp">
</div>
<div class="dz-message needsclick">
<div class="mb-3">
<i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
</div>
<h5>Перетащите файлы сюда или щелкните, чтобы загрузить.</h5>
</div>
</div>
<ul class="list-unstyled mb-0" id="dropzone-preview">
<li class="mt-2" id="dropzone-preview-list">
<div class="border rounded">
<div class="d-flex p-2">
<div class="flex-shrink-0 me-3">
<div class="avatar-sm bg-light rounded">
<img data-dz-thumbnail class="img-fluid rounded d-block" src="#" alt="Изображение" />
</div>
</div>
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-14 mb-1 text-break" data-dz-name> </h5>
<p class="fs-13 text-muted mb-0" data-dz-size></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
</div>
<div class="flex-shrink-0 ms-3">
<button data-dz-remove class="btn btn-sm btn-danger">Удалить</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>