@php
    $inputId = $id ?? str_replace(['[', ']'], ['_', ''], $name);
    $previewUrl = $preview ?? asset('assets/media/svg/files/blank-image.svg');
    $accept = $accept ?? '.png,.jpg,.jpeg,.webp,.svg';
@endphp

<style>
    .image-input-placeholder-{{ $inputId }} {
        background-image: url('{{ $previewUrl }}');
    }

    [data-bs-theme="dark"] .image-input-placeholder-{{ $inputId }} {
        background-image: url('{{ $previewUrl }}');
    }
</style>

<div class="image-input image-input-empty image-input-outline image-input-placeholder-{{ $inputId }} mb-3"
     data-kt-image-input="true">
    <div class="image-input-wrapper w-150px h-150px"></div>

    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
           data-kt-image-input-action="change"
           data-bs-toggle="tooltip"
           title="{{ trans('forms.edite_btn') }}">
        <i class="bi bi-pencil-fill fs-7"></i>
        <input type="file" name="{{ $name }}" accept="{{ $accept }}">
        <input type="hidden" name="{{ $removeName ?? 'avatar_remove' }}">
    </label>

    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
          data-kt-image-input-action="cancel"
          data-bs-toggle="tooltip"
          title="{{ trans('dash_site.Cancel') }}">
        <i class="bi bi-x fs-2"></i>
    </span>

    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
          data-kt-image-input-action="remove"
          data-bs-toggle="tooltip"
          title="{{ trans('forms.delete_btn') }}">
        <i class="bi bi-x fs-2"></i>
    </span>
</div>