<script type="text/x-template" id="restrictaccess-template">

    <!-- full template HTML here -->

    <div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="row" v-show="!isAddEditMode">

                    <OperationsPanel v-if="!readOnly">
                        <a @click="setAddEditUI" class="btn btn-primary waves-effect btnAction">{{ getLabelText('AddRestriction') }}</a>
                        <button id="btnRemoveAll" class="btn btn-primary waves-effect btnAction" v-if="!readOnly" v-show="showActionButton()" @click.prevent="removeBulkRecords">{{getLabelText("GN0000278")}}</button>
                    </OperationsPanel>

                    <SearchPanel id='restrictaccess-list' :showClearButton="showClearButton" @onSearch='doSearch' @onClear='doClearSearch'>

                        <div :class="searchContainerDivClass" v-if="rolesFilter.show">
                            <div class="form-group form-float">
                                <VueSelect id="rolesFilter" :options="rolesFilter.items" :selectedValue="this.search.roleFilter" @selectchange="roleChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.customerNameFilter" fieldName="customerNameFilter" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                    </SearchPanel>

                    <div class="col-xs-12" v-if="isLoading">
                        <Loading />
                    </div>

                    <div class="col-xs-12" v-else>

                        <table class="table table-bordered table-striped table-hover" cellspacing="0" rules="all" border="1" v-if="records.length > 0">

                            <tbody>
                                <tr>
                                    <th class="col-xs-1 align-center" v-if="!readOnly">
                                        <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                        <label for="CheckAll"></label>
                                    </th>
                                    <th class="col-xs-5"><a href="#" @click.prevent="sortBy('AccountName')">{{ getLabelText('GN0000268') }}</a></th>
                                    <th class="col-xs-5">{{ getLabelText('DGN1110499') }}</th>
                                    <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">
                                    <td class="align-center" v-if="!readOnly">
                                        <input type="checkbox" v-bind:id="record.RecordID" v-model="record.IsItemSelected" />
                                        <label v-bind:for="record.RecordID"></label>
                                    </td>
                                    <td>{{ record.AccountName }}</td>
                                    <td>{{ record.RoleName }}</td>
                                    <td v-if="!readOnly">
                                        <a @click.prevent="confirmRemoveRecord" :data-id="record.RecordID" :data-aname="record.AccountName" :data-rname="record.RoleName" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000278') }}</a>
                                    </td>
                                </tr>

                                <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                            </tbody>
                        </table>

                        <NoRecords v-else />

                    </div>
                </div>



                <div class="row" v-if="isAddEditMode">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="header">
                                <h3 v-html="headerText"></h3>
                            </div>
                            <div class="body">
                                <div class="row">
                                    <div class="col-xs-12 row-label">* {{ getLabelText('RestrictAccessToCustomers') }}: </div>
                                    <div class="col-xs-12">
                                        <VueMultiSelectableSelected :useTranslation="false" :items="accounts" :id="'accountslist'" @selectionInfo="accountsSelectionHandler" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 row-label">* {{ getLabelText('AccessDenyToStaffRole') }}: </div>
                                    <div class="col-xs-12">
                                        <VueMultiSelectableSelected :useTranslation="false" :items="roles" :id="'roleslist'" @selectionInfo="rolesSelectionHandler" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <a v-if="!readOnly" @click.prevent="saveRecord" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000281')}} </a>
                                        <a @click.prevent="cancelRecord" class="btn btn-primary waves-effect">{{ getLabelText('GN0000572')}} </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</script>