<!-- XS table -->
    <ul class="bb-xs-table visible-xs">
        <li ng-repeat="user in vm.users | limitTo: vm.pagination.perPage : (vm.pagination.currentPage - 1) * vm.pagination.perPage  track by user.Id">
            <div class="xs-table-item-content" ng-click="user.isExpanded = !user.isExpanded">
                <span class="main-header-item">
                    {{user.Username}}
                </span>
                <div class="right-side">
                    <span class="expand-arrow">
                        <i class="fa {{user.isExpanded ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
                    </span>
                </div>
            </div>

            <ul class="xs-subtable" ng-show="user.isExpanded">
                <!-- Id -->
                <li>
                    <div class="xs-subtable-item-content">
                        <span>{{'LABEL.ID' | translate}}</span>
                        <span class="pull-right">
                            {{user.Id}}
                        </span>
                    </div>
                </li>

                <!-- FirstName -->
                <li>
                    <div class="xs-subtable-item-content">
                        <span>{{'LABEL.FIRST_NAME' | translate}}</span>
                        <span class="pull-right">
                            {{user.FirstName}}
                        </span>
                    </div>
                </li>

                <!-- LastName -->
                <li>
                    <div class="xs-subtable-item-content">
                        <span>{{'LABEL.LAST_NAME' | translate}}</span>
                        <span class="pull-right">
                            {{user.LastName}}
                        </span>
                    </div>
                </li>

                <!-- Active -->
                <li>
                    <div class="xs-subtable-item-content">
                        <span>{{'LABEL.ACTIVE' | translate}}</span>
                        <span class="pull-right">
                            <i data-ng-class="(user.Active == true) ? 'fa fa-check color-green' : 'fa fa-ban color-red'"></i>
                        </span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>