{% set blankImage = foxorders_media_directory ~ 'blank.png' %}
{% set image = fileExists ? image : blankImage %}
{% if field.vars.label %}
    <div class="form-group">
        {{ form_label(field) }}
    </div>
{% endif %}
<div class="image-input image-input-outline" style="margin-left: 10px;" id="image_block" data-kt-image-input="true" {# style="background-image: url({{ asset(image) }})" #}>
    <div class="form-group fv-row">
        <div class="image-input image-input-outline bgi-position-center" data-kt-image-input="true" style="background-image: url({{ asset(blankImage) }});">
            <div class="image-input-wrapper w-{{width}}px h-{{height}}px fv-row bgi-position-center" style="background-image: url({{ asset(image) }});"></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="{{ 'app.global.buttons.change'|trans }}" data-bs-original-title="{{ 'app.global.buttons.change'|trans }}">
                <i class="bi bi-pencil-fill fs-7"></i>
                {{ form_widget(field) }}
                <input type="hidden" name="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="{{ 'app.global.buttons.cancel'|trans }}" data-bs-original-title="{{ 'app.global.buttons.cancel'|trans }}">
                <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 deleteimage" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="{{ 'app.global.buttons.delete'|trans }}" data-bs-original-title="{{ 'app.global.buttons.delete'|trans }}">
                <i class="bi bi-x fs-2"></i>
            </span>
        </div>
        {% set allowedFiles = field.vars.attr.accept ? field.vars.attr.accept|replace({'image/': ''})|split(', ') : null %}
        {% if allowedFiles|length > 0 %}
            <div class="form-text ">{{ 'app.global.fields.image.allowed_files'|trans }}: {{ allowedFiles|join(', ', ' ' ~ 'app.global.labels.and'|trans ~ ' ') }}</div>
        {% endif %}
        <div class="fv-plugins-message-container invalid-feedback">{{ form_errors(field) }}</div>
    </div>
</div>