{#
/*
 * Copyright © ProgramCMS. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Developed by Mohamed EL QUCHIRI <elquchiri@gmail.com>
 */
#}
<div
    class="image-uploader"
    data-controller="image-uploader"
    data-image-uploader-preview-value="{{ block.getPreviewId() }}"
    data-image-uploader-browse-value="#label-browse"
    data-image-uploader-target-value="{{ block.getId() }}"
>
    <div class="mt-1" aria-label="{{ block.getId() }}">
        <a
            data-action="image-uploader#triggerBrowse"
            class="btn btn-outline-primary btn-sm">
            {{ block.trans('From PC') }}
        </a>
        <a
            class="btn btn-outline-secondary btn-sm ms-1"
            data-action="image-uploader#openMediaBrowser">
            {{ block.trans('From Gallery') }}
        </a>
    </div>

    <div class="image-uploader__browser mt-3" id="{{ block.getPreviewId() }}" {% if block.hasValue() %}style="background-image: url({{ block.getValue() }})"{% endif %}>
        <label for="{{ block.getId() }}" id="label-browse" class="image-uploader__browser--placeholder">
            <span>{{ block.trans('Browse to Find or drag Image here') }}</span>
        </label>
    </div>
    <input
        id="{{ block.getId() }}"
        type="file"
        name="{{ block.getName() }}"
        class="d-none"
        accept="image/*"
        data-action="change->image-uploader#showPreview">
</div>