<!-- Copyright (C) 2016 NooBaa -->
<div class="card-shadow row pad content-middle">
    <h2 class ="heading3 push-next">Endpoint Groups</h2>
     <p class="remark content-middle push-next" ko.visible="lastUpdate">
        <svg-icon class="icon-small" params="name: 'clock'"></svg-icon>
        Updated: {{lastUpdate}}
    </p>
    <div class="greedy column content-end">
        <button class=btn
            ko.click=onDeployRemoteEndpointGroup
            ko.enable="dataReady"
        >
            Deploy Remote Endpoint Group
        </button>
    </div>
</div>

<data-table class="greedy" params="
    columns: columns,
    data: rows,
    sorting: ko.pc(sorting, onSort, $component),
    loading: !dataReady()
">
    <template name="nameAndLocality">
        <p class="row content-middle">
            {{$data().name}}
            <span class="tag push-prev-half" ko.visible="$data().localGroup">
                Local Group
            </span>
        </p>
    </template>
</data-table>

<paginator params="
    itemCount: groupCount,
    pageSize: ko.pc(pageSize, onPageSize, $component),
    page: ko.pc(page, onPage, $component)
"></paginator>
