<section class="page-list" data-bind="with: grid, attr: {
    class: 'page-list ' + (edited.visible()?'page-list-edited ':'')
}">

    <table>
        <tr>
            {{-- Левая колонка --}}
            <td class="page-aside">
                <nav>
                    <span class="title">Отображать поля</span>
                    <!--ko foreach: fields-->
                        <a data-bind="text: title, click: toggle, attr: {class: (active()?'active':'')}">&nbsp;</a>
                    <!--/ko-->
                </nav>
            </td>

            <td class="page-table-content">

                <table class="page-table">
                    <thead>
                        <tr class="page-table-main">
                            <td data-bind="attr: {colspan: active().length + 2}">
                                <nav class="header-paginate">
                                    <a data-bind="click: first" class="fi fi-fast-backward" title="В начало"></a>
                                    <a data-bind="click: prev" class="fi fi-step-backward" title="Назад"></a>
                                    <input type="text" value="1" data-bind="value: page" />
                                    <a data-bind="click: next" class="fi fi-step-forward" title="Вперёд"></a>
                                    <a data-bind="click: last" class="fi fi-fast-forward" title="В конец"></a>
                                </nav>

                                <nav class="header-controls">
                                    <span class="header-info">
                                        <b data-bind="text: countText">0</b> (<b data-bind="text: pagesText">0</b>)
                                    </span>
                                    <a data-bind="click: reload" class="fi fi-refresh" title="Перезагрузить"></a>
                                    <a data-bind="click: remove" class="fi fi-trash" title="Удалить"></a>
                                </nav>
                            </td>
                        </tr>

                        <tr class="page-table-columns">
                            <td class="checkbox">
                                <input type="checkbox" data-bind="checked: checkAll" />
                            </td>
                            <!--ko foreach: active-->
                                <td data-bind="text: title">&nbsp;</td>
                            <!--/ko-->
                            <td>&nbsp;</td>
                        </tr>
                    </thead>


                    {{-- Контент --}}
                    <tbody data-bind="attr: { class: (loaded()?'':'page-table-loaded')}">

                        <!--ko foreach: {data: items, as: 'item'} -->
                        <tr data-bind="attr: {class: (item.active()?'active':'') + ' ' + (item.hidden()?' hidden':'')}, click: toggle">
                            <td class="checkbox">
                                <input type="checkbox" data-bind="checked: item.active" />
                            </td>
                            <!--ko foreach: $root.grid.active-->
                            <td data-bind="html: item[id()]">&nbsp;</td>
                            <!--/ko-->
                            <td class="cell-controls">
                                <a data-bind="click: $parent.edit" title="Редактировать">
                                    <span class="fi fi-pencil"></span>
                                </a>
                            </td>
                        </tr>
                        <!--/ko-->

                    </tbody>



                    <tfoot>
                        <tr>
                            <td data-bind="attr: {colspan: active().length + 2}">
                                <nav class="footer-paginate">
                                    <a data-bind="click: first" class="fi fi-fast-backward" title="В начало"></a>
                                    <a data-bind="click: prev" class="fi fi-step-backward" title="Назад"></a>
                                    <input type="text" value="1" data-bind="value: page" />
                                    <a data-bind="click: next" class="fi fi-step-forward" title="Вперёд"></a>
                                    <a data-bind="click: last" class="fi fi-fast-forward" title="В конец"></a>
                                </nav>

                                <nav class="footer-controls">
                                    <span>
                                        <b data-bind="text: countText">0</b> (<b data-bind="text: pagesText">0</b>)
                                    </span>
                                </nav>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </table>
</section>