<div class="ui vertical stripe segment">
    <div class="ui middle aligned container">
        <h2>CRUD: {{ this.name }}</h2>
        <a class="ui button green right floated" href="{{ crudRoute baseRoute route="create" method="post" }}">Create</a>
        <p>View <span class="ui label">{{ this.name }}</span> items in the <span class="ui label">{{ this.collection }}</span> collection.</p>
        <div class="ui segment basic">
            Filter:
            <div class="ui icon input">
                <i class="search icon"></i>
                <input placeholder="Search..." type="text">
            </div>
        </div>
        <div>
            <div class="ui middle aligned divided list">
                <table class="ui very table compact celled striped">
                    <thead>
                        <tr>
                            {{#each header.keyList }}
                                <th>{{ this }}</th>
                            {{/each }}
                            <th class="one wide"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each list }}
                            <tr>
                                {{#each ../header.keyList }}
                                    <td>{{ getVal ../this this }}</td>
                                {{/each }}
                                <td>
                                    <div class="ui icon buttons">
                                        <a class="ui button" href="{{ crudRoute ../baseRoute route="update" _key=this._key method="put" }}"><i class="pencil icon"></i></a>
                                        <a class="ui button" href="{{ crudRoute ../baseRoute route="read" _key=this._key method="get" }}"><i class="info icon"></i></a>
                                    </div>
                                </td>
                            </tr>
                        {{/each }}
                    </tbody>
                    <tfoot>
                        <tr>
                            <th class="three wide"><b>Total:</b> <span class="ui label">{{ total.start }} - {{ total.end }}</span> <b>of</b> <span class="ui label">{{ total.found }}</span></th>
                            <th colspan="{{ header.length }}">
                                <div class="ui right floated pagination menu">

                                    <a class="icon item" href="{{ pager.nav.first.url }}">{{#if pager.nav.first.styleClass }}<i class="{{ pager.nav.first.styleClass }}"></i>{{/if }}{{ pager.nav.first.label }}</a>
                                    <a class="icon item" href="{{ pager.nav.previous.url }}">{{#if pager.nav.previous.styleClass }}<i class="{{ pager.nav.previous.styleClass }}"></i>{{/if }}{{ pager.nav.previous.label }}</a>

                                    {{#each pager.nav.list }}
                                    <a class="icon item {{ styleActive }}" href="{{ url }}">{{#if styleClass }}<i class="{{ styleClass }}"></i>{{/if }}{{ label }}</a>
                                    {{/each }}

                                    <a class="icon item" href="{{ pager.nav.next.url }}">{{#if pager.nav.next.styleClass }}<i class="{{ pager.nav.next.styleClass }}"></i>{{/if }}{{ pager.nav.next.label }}</a>
                                    <a class="icon item" href="{{ pager.nav.last.url }}">{{#if pager.nav.last.styleClass }}<i class="{{ pager.nav.last.styleClass }}"></i>{{/if }}{{ pager.nav.last.label }}</a>
                                </div>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
