<div class="card border shadow-sm">
	<div class="card-header d-flex flex-wrap">
		<h6 class="mb-0">{general:card:addImage}</h6>
		<div class="d-inline-flex ms-auto">
			<a class="text-body" data-card-action="collapse"><i class="ph-caret-down"></i></a>
		</div>
	</div>

	<div class="collapse show">
		<div class="content-image content-image-preview" id="content-image-preview">
        {if !empty($image)}
			<div class="card-img-actions">
				<img class="img-fluid" src="{$image}" alt="{$id}">
				<div class="card-img-actions-overlay">
					<a href="{$image}" class="btn btn-outline-white border-width-2" data-popup="lightbox">Просмотр</a>
{*				     <a href="#" class="btn btn-outline-white border-width-2 ms-2">Details</a>*}
				</div>
			</div>
        {/if}
		</div>

		<div id="preview-image-footer" class="preview-image-footer card-footer d-sm-flex justify-content-sm-between align-items-sm-center">
			<button id="content-image-preview-add" type="button" class="btn btn-sm btn-primary btn-upload read-more" data-type="image" data-path="/" data-action="read_more">
				<i class="ph-image me-2"></i>
                {if empty($id)}{general:uploadFile}{else}{general:changeFile}{/if}
			</button>

            {if !empty($id)}
			<button id="content-image-preview-remove" type="button" class="btn btn-sm btn-danger" onclick="deletePreviewImage('{$id}', '{$module}');">
				<i class="ph-trash me-2"></i>
				{general:delete}
			</button>
            {/if}

		</div>
	</div>

</div>