<div class="t-content" ng-controller="RichListWrapperExampleController as $ctrl" style="height: 500px;">

    <inv-rich-list-wrapper>
        <header-template>

            <inv-filter-bar
                search-placeholder="$ctrl.filterBar.searchPlaceholder"
                on-search-submitted="$ctrl.onSearchSubmitted"
                search-term="$ctrl.filterBar.searchTerm">
            </inv-filter-bar>

        </header-template>
        <content-template>

            <div class="c-richlist-item u-flex" ng-repeat="item in $ctrl.items track by $index">
                <div class="u-flexItemGrow">
                    <div class="c-richlist-name u-flex u-flexRow">
                        <div class="c-richlist-itemTitle" smart-truncate ng-bind="::item.name"></div>
                    </div>
                </div>
            </div>

        </content-template>
    </inv-rich-list-wrapper>
</div>

<div class="t-content" ng-controller="RichListWrapperExampleController as $ctrl" style="height: 500px;">

    <inv-rich-list-wrapper>
        <header-template>

            <inv-filter-bar
                on-search-by-selected="$ctrl.onSearchBySelected"
                on-search-submitted="$ctrl.onSearchSubmitted"
                search-by-items="$ctrl.filterBar.searchByItems"
                search-placeholder="$ctrl.filterBar.searchPlaceholder"
                search-term="$ctrl.filterBar.searchTerm">
            </inv-filter-bar>

        </header-template>
        <content-template>

            <div class="c-richlist-item u-flex" ng-repeat="item in $ctrl.items track by $index">
                <div class="u-flexItemGrow">
                    <div class="c-richlist-name u-flex u-flexRow">
                        <div class="c-richlist-itemTitle" smart-truncate ng-bind="::item.name"></div>
                    </div>
                </div>
            </div>

        </content-template>
    </inv-rich-list-wrapper>
</div>

<div class="t-content" ng-controller="RichListWrapperExampleController as $ctrl" style="height: 500px;">
    <inv-rich-list-wrapper>
        <header-template>

            <inv-filter-bar
                search-placeholder="$ctrl.filterBar.searchPlaceholder"
                on-search-submitted="$ctrl.onSearchSubmitted"
                search-term="$ctrl.filterBar.searchTerm"

                filter-title="$ctrl.filterBar.filterTitle"
                filter-items="$ctrl.filterBar.filterItems"
                on-filter-selected="$ctrl.onFilterSelected">
            </inv-filter-bar>

        </header-template>
        <content-template>

            <div class="c-richlist-item u-flex" ng-repeat="item in $ctrl.items track by $index">
                <div class="u-flexItemGrow">
                    <div class="c-richlist-name u-flex u-flexRow">
                        <div class="c-richlist-itemTitle" smart-truncate ng-bind="::item.name"></div>
                    </div>
                </div>
            </div>

        </content-template>
        <footer-template>

            <inv-pager-bar class="u-sizeFullWidth"
                current-page="1"
                is-pager-visible="true"
                items-per-page="5"
                number-of-pages="20"
                number-of-items="101"
                maximum-slots="6"
                on-page-selected="$ctrl.onPageSelected">
            </inv-pager-bar>

        </footer-template>
    </inv-rich-list-wrapper>
</div>

<div class="t-content" ng-controller="RichListWrapperExampleController as $ctrl" style="height: 500px;">

    <inv-rich-list-wrapper is-loading="$ctrl.isLoading">
        <header-template>

            <inv-filter-bar
                search-placeholder="$ctrl.filterBar.searchPlaceholder"
                on-search-submitted="$ctrl.onSearchSubmitted"
                search-term="$ctrl.filterBar.searchTerm">
            </inv-filter-bar>

        </header-template>
        <content-template>

        </content-template>
    </inv-rich-list-wrapper>
</div>