{* Title *}
{$meta_title = 'Управление разделами сайта' scope=root}

{* Container *}
<div class="container-fluid">

    {* Title *}
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">Разделы</h3>
                <div class="nk-block-des text-soft">
                    <p>Управление разделами сайта.</p>
                </div>
            </div>
            <div class="nk-block-head-content">
                <div class="toggle-wrap nk-block-tools-toggle">

                    {* Mobile toogle btn *}
                    <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu">
                        <em class="icon ti ti-menu"></em>
                    </a>

                    {* Add btn *}
                    <div class="toggle-expand-content" data-content="pageMenu">
                        <ul class="nk-block-tools g-3">
                            <li>
                                <a href="{url module=PageAdmin return=$smarty.server.REQUEST_URI}" class="btn btn-secondary">
                                    <em class="icon ti ti-circle-plus"></em>
                                    <span>Создать раздел</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {* List *}
    <div class="nk-block">
        <div class="card card-bordered card-stretch">
            <div class="card-inner-group">

                {if $pages}
                <form class="js-list-form" method="post">
                    <div class="p-0">

                        {* Head list *}
                        <div class="nk-tb-list nk-tb-ulist">
                            <div class="nk-tb-item nk-tb-head">

                                {* Check all *}
                                <div class="nk-tb-col nk-tb-col-check">
                                    <div class="custom-control custom-control-sm custom-checkbox notext">
                                        <input type="checkbox" class="custom-control-input js-check-all" id="checkall">
                                        <label class="custom-control-label" for="checkall"></label>
                                    </div>
                                </div>
                                {* Name *}
                                <div class="nk-tb-col w-40">
                                    <div class="user-card">
                                        <div>
                                            <span class="sub-text">Название</span>
                                        </div>
                                        <div class="ml-auto">
                                            {if $pages}
                                            <button type="button" class="btn btn-icon btn-sm btn-light d-xl-inline-flex js-all-pages-toogle" data-toggle="tooltip" data-placement="top" data-original-title="Развернуть все">
                                                <em class="icon ti ti-chevron-down"></em>
                                            </button>
                                            {/if}
                                        </div>
                                    </div>
                                </div>
                                <div class="nk-tb-col tb-col-xxl">
                                    <span class="sub-text">Шаблон</span>
                                </div>
                                <div class="nk-tb-col nk-tb-col-tools text-right">Действие</div>
                            </div>
                        </div>

                        {* Main list *}
                        {function name=pages_tree level=0}
                        {if $pages}
                        <div class="nk-tb-list nk-tb-ulist nk-tb-categories is-compact js-list js-list-sortable">

                            {* Categories *}
                            {foreach $pages as $page}
                            <div class="nk-tb-item js-list-item {if !$page->visible}invisible{/if} {if $page->is_menu}is_menu{/if} {if $page->visible_submenu}visible_submenu{/if}">
                                <div class="d-table w-100 table-fixed">

                                    {* Checkbox *}
                                    <div class="nk-tb-col nk-tb-col-check">
                                        <div class="custom-control custom-control-sm custom-checkbox notext">
                                            <input type="checkbox" name="check[]" value="{$page->id}" class="custom-control-input" id="uid_{$page->id}">
                                            <label class="custom-control-label" for="uid_{$page->id}"></label>
                                        </div>
                                    </div>

                                    {* Name *}
                                    <div class="nk-tb-col nk-tb-col-name w-40">
                                        <div class="user-card" style="margin-left:{$level*25}px">
                                            <div class="user-avatar border bg-white rounded-pill rounded-0">
                                                <a href="{url module=PageAdmin id=$page->id return=$smarty.server.REQUEST_URI}">
                                                    {if !empty($page->image)}
                                                    <img src="{$page->image|resize:70:70:auto:true}" class="rounded-0 p-1">
                                                    {else}
                                                    <img src="{'/files/no-image.png'|resize:70:70}" class="rounded-0 p-1">
                                                    {/if}
                                                </a>
                                            </div>
                                            <div class="user-info">
                                                <a href="{url module=PageAdmin id=$page->id return=$smarty.server.REQUEST_URI}">
                                                    <span class="tb-lead">{$page->name}</span>
                                                    <span class="sub-text">
                                                        /{$page->url}
                                                    </span>
                                                </a>
                                            </div>
                                            <div class="ml-auto">
                                                {if $page->subpages}
                                                <button type="button" class="btn btn-icon btn-sm btn-light d-xl-inline-flex js-pages-toogle" data-toggle="tooltip" data-placement="top" data-original-title="Развернуть">
                                                    <em class="icon ti ti-chevron-down"></em>
                                                </button>
                                                {/if}
                                            </div>
                                        </div>
                                    </div>

                                    {* Template *}
                                    <div class="nk-tb-col nk-tb-col-title tb-col-xxl">
                                        <span class="tb-lead">{$page->template}</span>
                                    </div>

                                    {* Tools *}
                                    <div class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1">

                                            {* Positions *}
                                            <input type="hidden" name="positions[{$page->id}]" value="{$page->position}">

                                            {* Preview *}
                                            <li class="d-none d-lg-block">
                                                <a href="../{$page->url}" target="_blank" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" data-original-title="Просмотр">
                                                   <em class="icon ti ti-external-link"></em>
                                                </a>
                                            </li>

                                            {* Menu *}
                                            <li class="menu d-none d-lg-block">
                                                <button type="button" class="btn btn-trigger btn-icon js-list-mark js-list-mark-state-first" data-mark-object="page" data-mark-type="is_menu" data-mark-toogle-class="is_menu" data-toggle="tooltip" data-placement="top" data-original-title="Выводить в меню">
                                                    <i class="icon ti ti-circle"></i>
                                                </button>
                                            </li>

                                            {* Submenu *}
                                            <li class="submenu d-none d-lg-block">
                                                <button type="button" class="btn btn-trigger btn-icon js-list-mark js-list-mark-state-first" data-mark-object="page" data-mark-type="visible_submenu" data-mark-toogle-class="visible_submenu" data-toggle="tooltip" data-placement="top" data-original-title="Выводить подменю">
                                                    <i class="icon ti ti-circle"></i>
                                                </button>
                                            </li>

                                            {* Active *}
                                            <li class="d-none d-lg-block">
                                                <button type="button" class="btn btn-trigger btn-icon js-list-mark" data-mark-object="page" data-mark-type="visible" data-mark-toogle-class="invisible" data-toggle="tooltip" data-placement="top" data-original-title="Активность">
                                                    <em class="icon ti ti-eye"></em>
                                                </button>
                                            </li>

                                            {* Move *}
                                            <li class="d-none d-lg-block">
                                                <button type="button" class="btn btn-trigger btn-icon js-list-move" data-toggle="tooltip" data-placement="top" title="" data-original-title="Переместить">
                                                    <em class="icon ti ti-arrows-vertical"></em>
                                                </button>
                                            </li>

                                            {* Delete *}
                                            <li>
                                                <button type="button" class="btn btn-trigger btn-icon text-danger js-list-delete" data-toggle="tooltip" data-placement="top" title="Удалить">
                                                    <em class="icon ti ti-trash"></em>
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                {pages_tree pages=$page->subpages level=$level+1}
                            </div>
                            {/foreach}
                        </div>
                        {/if}
                        {/function}
                        {pages_tree pages=$pages}
                    </div>

                    {* Pagination *}
                    <div class="card-inner">
                        <div class="nk-block-between-md g-3">

                            {* Mass actions *}
                            <div class="g">
                                <div class="center form-inline flex-nowrap gx-3">
                                    <div class="form-wrap w-200px">
                                        <select name="action" class="form-select form-select-sm" data-placeholder="Массовые действия">
                                            <option value="">Массовые действия</option>
                                            <option value="enable">Сделать активным</option>
                                            <option value="disable">Сделать неактивным</option>
                                            <option value="delete">Удалить</option>
                                        </select>

                                    </div>
                                    <div class="btn-wrap">
                                        <span class="d-none d-md-block">
                                            <button type="submit" class="btn btn-dim btn-outline-light">Применить</button>
                                        </span>
                                        <span class="d-md-none">
                                            <button type="submit" class="btn btn-dim btn-outline-light btn-icon">
                                                <em class="icon ti ti-arrow-right"></em>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
                {else}
                <div class="card-inner">
                    <div class="nk-tb-item">
                        <p>Разделы не найдены.</p>
                    </div>
                </div>
                {/if}
            </div>
        </div>
    </div>

</div>
