@paperbits/core/workshops/layout/ko/layouts.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 layouts..."
                aria-label="Search layouts" aria-controls="searchResult" />

            <p id="searchResult" class="text-hide" role="region" aria-live="polite"
                data-bind="text: `Layouts found: ${layouts().length}`">
            </p>
        </div>
    </div>

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

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

    <!-- ko if: searchPattern() !== "" -->
    <p class="flex-item flex-item-grow text-center" aria-label="Search result">
        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: layouts, as: 'layout' } -->
        <a role="option" class="list-item"
            data-bind="css: { selected:  $component.isSelected(layout) }, attr: { title: layout.title }, activate: $component.selectLayout, selectable: true">
            <i aria-hidden="true" class="paperbits-icon paperbits-layout-11-2"></i>
            <span data-bind="text: layout.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: addLayout">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i>
            Add layout
        </button>
    </div>
</div>