<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-red-sunglo">
            <i class="icon-share font-red-sunglo"></i>
            <span class="caption-subject bold uppercase" ng-bind="pageTitle"></span>
            <!--<span class="caption-helper">edit</span>-->
        </div>
        <div class="actions">
            <div class="btn-group btn-group-devided">
                <a ui-sref="pageDetails({id: 0, lang: cmsSettings.default_language})"
                   class="btn btn-circle green font-white btn-default btn-sm">
                    <i class="fa fa-check"></i> Create
                </a>
                <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div my-data-table
             dr-total-items="vm.totalItems"
             dr-items-per-page="vm.allParams.per_page"
             dr-current-page="vm.allParams.page"
             dr-pagination-changed="vm.paginationChanged()"
             dr-max-size="vm.maxSize"
             dr-per-page-changed="vm.perPageChanged()"
             dr-selected-items="vm.selectedItems"
             dr-group-actions="vm.groupActions"
             dr-current-group-action="vm.drCurrentGroupAction"
             dr-handle-group-actions="vm.handleGroupActions()"
             class="dataTables_wrapper dataTables_extended_wrapper no-footer table-wrapper">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover vertical-middle">
                    <colgroup>
                        <col width="1%">
                        <col width="60%">
                        <col width="1%">
                        <col width="10%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>
                            <label class="custom-checkbox">
                                <div class="checker">
                                    <input type="checkbox"
                                           ng-model="vm.checkedAllItems"
                                           ng-true-value="true"
                                           ng-false-value="false"
                                           ng-change="vm.multiSelect()">
                                    <span></span>
                                </div>
                            </label>
                        </th>
                        <th>Page title (global)</th>
                        <th>Status</th>
                        <th>Created at</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control input-sm" placeholder="Search..." ng-model="vm.allParams.global_title">
                        </td>
                        <td></td>
                        <td></td>
                        <td>
                            <button class="btn btn-success btn-xs" ng-click="vm.handleSearch()"><i class="fa fa-search"></i></button>
                            <button class="btn btn-warning btn-xs" ng-click="vm.clearSearch()"><i class="fa fa-times"></i></button>
                        </td>
                    </tr>
                    <tr ng-repeat="item in vm.pages">
                        <td>
                            <label class="custom-checkbox">
                                <div class="checker">
                                    <input type="checkbox"
                                           ng-model="vm.selectedItems[item.id]"
                                           ng-checked="vm.selectedItems[item.id] == true"
                                           ng-change="vm.changeSelect()"
                                           value="{{ item.id }}">
                                    <span></span>
                                </div>
                            </label>
                        </td>
                        <td>
                            <a ui-sref="pageDetails({id: item.id, lang: cmsSettings.default_language})"
                               ng-bind="item.global_title"
                               ng-if="vm.isEditing != true || vm.currentSelectedItem.id != item.id"
                               title="Edit"></a>
                            <input type="text"
                                   class="form-control"
                                   ng-if="vm.isEditing == true && vm.currentSelectedItem.id == item.id"
                                   ng-model="vm.fastEditData.global_title">
                        </td>
                        <td ng-bind-html="vm.getStatus(item.status)"></td>
                        <td ng-bind="item.created_at"></td>
                        <td>
                            <button type="button"
                                    ng-click="vm.showUpdateField(item)"
                                    ng-if="vm.isEditing != true || vm.currentSelectedItem.id != item.id"
                                    class="btn btn-info btn-xs"
                                    title="Edit">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button type="button"
                                    ng-click="vm.confirmUpdate()"
                                    ng-if="vm.currentSelectedItem.id == item.id"
                                    class="btn btn-success btn-xs"
                                    title="OK">
                                <i class="fa fa-check"></i>
                            </button>
                            <button type="button"
                                    ng-click="vm.cancelUpdate()"
                                    ng-if="vm.currentSelectedItem.id == item.id"
                                    class="btn btn-info btn-xs"
                                    title="Cancel">
                                <i class="fa fa-times"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-success btn-xs"
                                    title="Active this page"
                                    mwl-confirm
                                    message="Are you sure you wanna active this page?"
                                    confirm-text="Yes <i class='fa fa-check'></i>"
                                    cancel-text="No <i class='fa fa-times'></i>"
                                    placement="top"
                                    confirm-button-type="danger"
                                    cancel-button-type="success"
                                    on-confirm="vm.updateStatus(item.id, 1)"
                                    ng-if="item.status == 0 && vm.currentSelectedItem.id != item.id">
                                <i class="fa fa-check"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-warning btn-xs"
                                    title="Disable this page"
                                    mwl-confirm
                                    message="Are you sure you wanna disable this page?"
                                    confirm-text="Yes <i class='fa fa-check'></i>"
                                    cancel-text="No <i class='fa fa-times'></i>"
                                    placement="top"
                                    confirm-button-type="danger"
                                    cancel-button-type="success"
                                    on-confirm="vm.updateStatus(item.id, 0)"
                                    ng-if="item.status == 1 && vm.currentSelectedItem.id != item.id">
                                <i class="fa fa-times"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-danger btn-xs"
                                    title="Remove this page"
                                    ng-if="vm.currentSelectedItem.id != item.id"
                                    mwl-confirm
                                    message="Are you sure you wanna delete this page?"
                                    confirm-text="Yes <i class='fa fa-check'></i>"
                                    cancel-text="No <i class='fa fa-times'></i>"
                                    placement="top"
                                    confirm-button-type="danger"
                                    cancel-button-type="success"
                                    on-confirm="vm.deletePage(item.id)">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="portlet-title portlet-footer">
        <div class="actions">
            <div class="btn-group btn-group-devided">
                <button type="submit" class="btn btn-circle green font-white btn-default btn-sm">
                    <i class="fa fa-check"></i> Create
                </button>
                <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
            </div>
        </div>
    </div>
</div>