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

	{* Add *}
	<div class="form-group">
		<input type="text" class="form-control js-product-related-add" name="related" placeholder="Выберите товар чтобы добавить его">
	</div>
	<div class="card-inner card-bordered p-0 mb-2">
		{* List *}
		<div class="nk-tb-list nk-tb-ulist js-product-related-list">
			{foreach $page->related_pages as $related_page}
			<div class="nk-tb-item js-product-related-item">
				<div class="nk-tb-col">
					<input type="hidden" name="related_pages[]" value="{$related_page->id}">
					<a href="{url module=PageAdmin id=$related_page->id}" target="_blank">
						<div class="user-card">
							<div class="user-avatar border bg-white rounded-pill rounded-0">
								{if !empty($related_page->image)}
								<img src="{$related_page->image|resize:70:70}" class="rounded-0 p-1">
								{else}
								<img src="files/no-image.png" width=40 height=40 class="rounded-0 p-1">
								{/if}
							</div>
							<div class="user-info">
								<span class="tb-lead">
									{$related_page->name}
								</span>
							</div>
						</div>
					</a>
				</div>
				<div class="nk-tb-col nk-tb-col-tools">
					<ul class="nk-tb-actions gx-1">
						<li>
							<a href="#" class="btn btn-trigger btn-icon js-list-move" data-toggle="tooltip" data-placement="top" data-original-title="Переместить">
								<em class="icon ti ti-arrows-vertical"></em>
							</a>
						</li>
						<li>
							<a href="#" class="btn btn-trigger btn-icon text-danger js-related-delete" data-toggle="tooltip" data-placement="top" data-original-title="Удалить">
								<em class="icon ti ti-trash"></em>
							</a>
						</li>
					</ul>
				</div>
			</div>
			{/foreach}
		</div>

		{* New item *}
		<div class="nk-tb-item js-product-related-new d-none">
			<div class="nk-tb-col">
				<input type="hidden" name="related_pages[]" value="">
				<a href="" target="_blank">
					<div class="user-card">
						<div class="user-avatar border bg-white rounded-pill rounded-0">
							<img src="" class="rounded-0 p-1">
						</div>
						<div class="user-info">
							<span class="tb-lead">
								{$related_page->name}
							</span>
						</div>
					</div>
				</a>
			</div>
			<div class="nk-tb-col nk-tb-col-tools">
				<ul class="nk-tb-actions gx-1">
					<li>
						<a href="#" class="btn btn-trigger btn-icon js-list-move" data-toggle="tooltip" data-placement="top" data-original-title="Переместить">
							<em class="icon ti ti-arrows-vertical"></em>
						</a>
					</li>
					<li>
						<a href="#" class="btn btn-trigger btn-icon text-danger js-related-delete" data-toggle="tooltip" data-placement="top" data-original-title="Удалить">
							<em class="icon ti ti-trash"></em>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

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