<div ng-show="vm.data.length > 0 && vm.loader == false">
    <div class="row" ng-if="vm.config.filter == 'fulltext'">
        <div class="col-xs-12">
            <input
                    class="form-control"
                    placeholder="Type to search.."
                    type="text"
                    ng-model="vm.query"/>
        </div>
    </div>
    <div class="table-responsive">
        <table ng-class="vm.classes">
        <thead>
        <tr>
            <th ng-repeat="col in vm.columns">
                {{col.label}}
                <div ng-if="vm.config.order">
                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
                      <i class="fa fa-chevron-up"></i>
                    </a>
                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
                      <i class="fa fa-chevron-down"></i>
                    </a>
                </div>
            </th>
            <th ng-if="vm.config.actions">Actions:</th>
        </tr>
        </thead>
        <tbody ng-if="vm.config.filter == 'field'">
            <tr>
                <td ng-repeat="col in vm.columns">
                    <input
                            ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
                            class="form-control"
                            placeholder="Type to search by {{col.label}}"
                            type="text"
                            ng-model="vm.query[col.prop]"/>
                    <select
                            ng-if="col.type === 'boolean'"
                            class="form-control"
                            ng-model="vm.query[col.prop]">
                        <option value="">-</option>
                        <option value="true">True</option>
                        <option value="false">False</option>
                    </select>
                </td>
                <td ng-if="vm.config.actions"></td>
            </tr>
        </tbody>
        <tbody>
        <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
            <td ng-repeat="col in vm.columns" xos-link-wrapper>
                <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
                <span ng-if="col.type === 'boolean'">
                    <i class="fa"
                       ng-class="{'fa-ok': item[col.prop], 'fa-remove': !item[col.prop]}">
                    </i>
                  </span>
                <span ng-if="col.type === 'date'">
                    {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
                  </span>
                <span ng-if="col.type === 'array'">
                    {{item[col.prop] | arrayToList}}
                  </span>
                <span ng-if="col.type === 'object'">
                    <dl class="dl-horizontal">
                      <span ng-repeat="(k,v) in item[col.prop]">
                        <dt>{{k}}</dt>
                        <dd>{{v}}</dd>
                      </span>
                    </dl>
                  </span>
                <span ng-if="col.type === 'custom'">
                    {{item[col.prop + '-formatted']}}
                    <i class="ng-hide">{{col.formatter(item)}}</i>
                  </span>
                <span ng-if="col.type === 'icon'">
                    <i class="fa fa-{{col.formatter(item)}}">
                    </i>
                </span>
                <div class="xos-table-hover" ng-if="col.hover">
                    <div class="alert alert-info">
                        {{col.hover(item)}}
                    </div>
                </div>
            </td>
            <td ng-if="vm.config.actions">
                <a href=""
                   ng-repeat="action in vm.config.actions"
                   ng-click="action.cb(item)"
                   title="{{action.label}}">
                    <i
                            class="fa fa-{{action.icon}}"
                            style="color: {{action.color}};"></i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <xos-pagination
            ng-if="vm.config.pagination"
            page-size="vm.config.pagination.pageSize"
            total-elements="vm.data.length"
            change="vm.goToPage">
    </xos-pagination>
    </div>
</div>
<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
    <xos-alert config="{type: 'info'}" show="true">
        No data to show.
    </xos-alert>
</div>
<div ng-show="vm.loader == true">
    <div class="loader"></div>
</div>