<div>
    <div class="copy">
        <h3>
            Sorting
        </h3>
        <p>
            FlexSheet can be sorted by its each column.  The <b>SortManager</b> helps FlexSheet to manage the sort processing including set the order of the sorting, add sort column, remove sort column and change the order of the sort columns.
        </p>
    </div>
    <div>
        <div class="row" id="sortTable">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">Column</th>
                        <th class="text-center">Order</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="sortItem in ctx.sortManager.sortDescriptions.items"
                        ng-click="ctx.sortManager.sortDescriptions.moveCurrentTo(sortItem)"
                        ng-class="{success: sortItem === ctx.sortManager.sortDescriptions.currentItem}">
                        <td>
                            <select class="form-control" ng-model="sortItem.columnIndex">
                                <option value=-1></option>
                                <option ng-repeat="column in ctx.columns" ng-selected="$index === sortItem.columnIndex"
                                    value={{$index}}>{{column}}</option>
                            </select>
                        </td>
                        <td>
                            <select class="form-control" ng-model="sortItem.ascending"
                                ng-options="o.v as o.n for o in [{n: 'Ascending', v: true}, {n: 'Descending', v: false}]">
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row well well-lg">
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="addSortLevel()">
                    <span class="glyphicon glyphicon-plus-sign"></span>&nbsp;Add Level
                </button>
                <button type="button" class="btn btn-default" ng-click="deleteSortLevel()">
                    <span class="glyphicon glyphicon-remove-sign"></span>&nbsp;Delete Level
                </button>
                <button type="button" class="btn btn-default" ng-click="copySortLevel()">
                    <span class="glyphicon glyphicon-copy"></span>&nbsp;Copy Level
                </button>
            </div>
            <div class="btn-group">
                <button id="moveup" type="button" 
                    class="btn btn-default" 
                    ng-disabled="ctx.sortManager.sortDescriptions.currentPosition <= 0"
                    ng-click="moveSortLevel(-1)">
                    <span class="glyphicon glyphicon-arrow-up"></span>
                </button>
                <button id="movedown" type="button" 
                    class="btn btn-default" 
                    ng-disabled="ctx.sortManager.sortDescriptions.currentPosition >= ctx.sortManager.sortDescriptions.itemCount - 1"
                    ng-click="moveSortLevel(1)">
                    <span class="glyphicon glyphicon-arrow-down"></span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="commitSort()">OK</button>
                <button type="button" class="btn btn-default" ng-click="cancelSort()">Cancel</button>
            </div>
        </div>
        <wj-flex-sheet class="flexSheet" control="ctx.flexSheet" initialized="initialized(s)">
            <wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
        </wj-flex-sheet>
    </div>
</div>