<div class="page page-table" data-ng-controller="GetLeagues">

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h1>Leagues</h1>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default table-dynamic">
                <div class="table-filters">
                    <div class="row">
                        <div class="col-sm-4 col-xs-6">
                            <form>
                                <input type="text"
                                       placeholder="Search..."
                                       class="form-control"
                                       data-ng-model="searchKeywords"
                                       data-ng-keyup="search()">
                            </form>
                        </div>
                        <div class="col-sm-3 col-xs-6 filter-result-info">
                            <span>
                                Showing {{filteredLeagues.length}}/{{leagues.length}} entries
                            </span>
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-responsive">
                    <thead>
                        <tr>
                            <th><div class="th">
                                League Name
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('name') "
                                      data-ng-class="{active: row == 'name'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-name') "
                                      data-ng-class="{active: row == '-name'}"></span>
                            </div></th>
                            <th><div class="th">
                                Sport
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('sport') "
                                      data-ng-class="{active: row == 'sport'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-sport') "
                                      data-ng-class="{active: row == '-sport'}"></span>
                            </div></th>
                            <th><div class="th">
                                Age
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('age') "
                                      data-ng-class="{active: row == 'age'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-age') "
                                      data-ng-class="{active: row == '-age'}"></span>
                            </div></th>
                            <th><div class="th">
                                Zip
                                <span class="fa fa-angle-up"
                                      data-ng-click=" order('zip') "
                                      data-ng-class="{active: row == 'zip'}"></span>
                                <span class="fa fa-angle-down"
                                      data-ng-click=" order('-zip') "
                                      data-ng-class="{active: row == '-zip'}"></span>
                            </div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-repeat="league in leagues">
                            <td>{{league.name}}</td>
                            <td>{{league.sport}}</td>
                            <td>{{league.age}}</td>
                            <td>{{league.zip}}</td>
                        </tr>
                    </tbody>
                </table>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                            <span>
                                Show
                                <select data-ng-model="numPerPage"
                                        data-ng-options="num for num in numPerPageOpt"
                                        data-ng-change="onNumPerPageChange()">
                                </select>
                                entries per page
                            </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <pagination class="pagination-sm"
                                        ng-model="currentPage"
                                        total-items="filteredLeagues.length"
                                        max-size="4"
                                        ng-change="select(currentPage)"
                                        items-per-page="numPerPage"
                                        rotate="false"
                                        previous-text="&lsaquo;" next-text="&rsaquo;"
                                        boundary-links="true"></pagination>
                        </div>
                    </div>
                </footer>
            </section>
        </div>
    </div>

</div>