<div class="nk-block js-component-images">
    <div class="nk-block-head">
        <h5 class="title">Изображения</h5>
        <p>Вы можете загрузить несколько изображений и использовать их в шаблоне.</p>
    </div>
    <div class="gy-3">

        {* Drop zone *}
        <div class="row">
            <div class="col-12">
                <div class="drop-zone-block">
                    <div class="js-drop-zone">
                        <div class="drop-message">Перетащите файлы сюда или просто нажмите, чтобы выбрать файлы.</div>
                        <input type="file" name="dropped_images[]" multiple class="js-drop-input">
                    </div>
                </div>
            </div>
        </div>

        {* Images *}
        <div class="nk-files nk-files-view-grid">
            <div class="nk-files-list js-images-list {if $images|count > 1}js-images-sortable{/if}">

                {foreach $images as $image}
                <div class="nk-file-item nk-file js-image-item">

                    <input type="hidden" name="images[]" value="{$image->id}">

                    <div class="nk-file-info">
                        <div class="nk-file-link">
                            <div class="nk-file-title">

                                {* Image *}
                                <div class="nk-file-icon">
                                    <a href="{$image->filepath}" data-fancybox="gallery">
                                        <img src="{$image|resize:450:450}" class="h-max-150px">
                                    </a>
                                </div>

                                {* Rename *}
                                <div class="nk-file-name">
                                    <div class="nk-file-name-text">
                                        <div class="title">{$image->filename}</div>
                                    </div>
                                </div>
                            </div>

                            {* Info *}
                            <ul class="nk-file-desc">
                                {if $image->width && $image->height}
                                <li class="image-size">
                                    {$image->width}x{$image->height}px
                                </li>
                                {/if}
                                <li class="file-size">
                                    {$image->filesize|size}
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="nk-file-actions hideable">
                        <ul class="gy-2">
                            {* Copy *}
                            <li>
                                <a href="{$config->root_url}/{$image->filepath}" class="btn btn-trigger btn-icon js-clipboard-copy" data-toggle="tooltip" data-placement="top" title="Копировать">
                                    <em class="icon ti ti-copy"></em>
                                </a>
                            </li>

                            {* Move *}
                            <li>
                                <div class="btn btn-sm btn-icon btn-trigger js-image-move" data-toggle="tooltip" data-placement="top" title="Переместить">
                                    <em class="icon ti ti-arrows-horizontal"></em>
                                </div>
                            </li>

                            {* Delete *}
                            <li>
                                <div class="btn btn-sm btn-icon btn-trigger text-danger js-image-delete" data-toggle="tooltip" data-placement="top" title="Удалить">
                                    <em class="icon ti ti-trash"></em>
                                </div>
                            </li>

                        </ul>
                    </div>

                </div>
                {/foreach}

            </div>
        </div>
    </div>
</div>

<div class="justify-center mt-2">
    <button type="submit" class="btn btn-success">Сохранить</button>
</div>
