@paperbits/core/workshops/page/ko/pages.html

Paperbits core components.

<div class="flex flex-column fit">
    <div class="flex-item form">
        <div class="form-group">
            <input class="form-control" type="search" role="searchbox"
                data-bind="textInput: searchPattern, valueUpdate: 'keyup', focus: true" placeholder="Search pages..."
                aria-label="Search pages" aria-controls="searchResult" />
            <p id="searchResult" class="text-hide" role="region" aria-live="polite"
                data-bind="text: `Pages found: ${pages().length}`">
            </p>
        </div>
    </div>

    <!-- ko if: !working() && pages().length === 0 -->

    <!-- ko if: searchPattern() === "" -->
    <p class="flex-item flex-item-grow text-center">It seems that you don't have pages yet. Would you like to
        <a href="#" class="btn-link" data-bind="click: addPage">create one</a>?
    </p>
    <!-- /ko -->

    <!-- ko if: searchPattern() !== ""  -->
    <p class="flex-item flex-item-grow text-center">Could not find anything. Try to change search criteria.</p>
    <!-- /ko -->

    <!-- /ko -->

    <div class="flex flex-column flex-item flex-item-grow" role="listbox" data-bind="scrollable: true, listbox: {}">
        <!-- ko foreach: { data: pages, as: 'page' } -->
        <a role="option" class="list-item flex-grow"
            data-bind="css: { selected: $component.isSelected(page) }, attr: { title: page.title }, activate: $component.selectPage, selectable: true">
            <i aria-hidden="true" class="paperbits-icon paperbits-single-content-03"></i>
            <span class="text-overflow" data-bind="text: page.title"></span>
        </a>
        <!-- /ko -->
        <!--ko if: $component.working()-->
        <spinner></spinner>
        <!--/ko-->
        <!-- ko ifnot: $component.working -->
        <div class="list-edge" data-bind="whenInView: $component.loadNextPage"></div>
        <!-- /ko -->
    </div>

    <div class="flex-item btn-group">
        <button class="btn btn-default" data-bind="click: $component.addPage">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i>
            Add page
        </button>
    </div>
</div>