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

    <!-- full template HTML here -->

    <div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="row">

                    <ModalPopUp :id="'lhenabled'" v-if="showModal" :parentContext="parentContext" :modalTitle="modalTitle" @onYes="mpModelEventHandler" @onNo="mpModelEventHandler"
                                :yesButtonText="getLabelText('GN0000281')" :noButtonText="getLabelText('GN0000572')">
                        <div class="row">
                            <div class="col-xs-12 row-label">* {{ getLabelText('MD203') }}: </div>
                            <div class="col-xs-12">
                                <VueMultiSelectableSelected :useTranslation="true" :items="ucOrgs" id="ucOrgsSettings" @selectionInfo="OrgsSelectionInfoHandler" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <label>{{ getLabelText('EnableLH4AllMBox') + ':' }}</label>
                            </div>
                            <div class="col-sm-7 col-xs-12">
                                <div class="form-group">
                                    <input type="checkbox" v-model="cbEnableLH4AllMBox" />
                                </div>
                            </div>
                        </div>
                        <div class="row" v-if="cbEnableLH4AllMBox">
                            <div class="col-sm-5 col-xs-12 row-label">{{ getLabelText('FAM0081') }}</div>
                            <div class="col-sm-5 col-xs-12 row-label">
                                <InputText v-model:fieldValue="tbLHDuration" :disabled="this.tbLHDurationUnlimited" />
                            </div>
                            <div class="col-sm-2 col-xs-12 row-label">
                                <div class="form-group">
                                    <input type="checkbox" v-model="tbLHDurationUnlimited" />
                                </div>
                            </div>
                        </div>
                        <div class="row" v-if="cbEnableLH4AllMBox">
                            <div class="col-sm-5 col-xs-12 row-label">{{ getLabelText('FAM00122') }}</div>
                            <DatePicker id='lhDate' wrapperClass="col-sm-5 col-xs-12" :default-val="lhDate" @onDateSelected='lhDateSelectHandler' :is-required='true'></DatePicker>
                        </div>
                    </ModalPopUp>

                    <OperationsPanel v-if="(syncFromBackendAllowed || exchLitigationHold) && !readOnly">
                        <a v-if="!isLoggedInAsCustomer && !isSubReseller" @click.prevent="fixSecurityGroup(search.labelSrch,search.orgName);" class="btn btn-primary waves-effect btnAction">{{ getLabelText('Exh0037') }}</a>
                        <a v-if="syncFromBackendAllowed" @click.prevent="syncData(search.labelSrch,search.orgName)" class="btn btn-primary waves-effect btnAction">{{ getLabelText('Exh0038') }}</a>
                        <a v-if="exchLitigationHold" @click.prevent="showPopUp" class="btn btn-primary waves-effect btnAction">{{ getLabelText('Exch0901') }}</a>
                    </OperationsPanel>

                    <SearchPanel id='account-list' :showClearButton="showClearButton" @onSearch='doSearch' @onClear='doClearSearch'>
                        <div :class="searchContainerDivClass" v-if="owners.show  && !isLoggedInAsCustomer">
                            <div class="form-group form-float">
                                <VueSelect :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.srchId" fieldName="srchId" fieldDataType="Number" :fieldLabel="getLabelText('SPT002807')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.srchDomainName" fieldName="srchDomainName" :fieldLabel="getLabelText('DGN1110516')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.clientId" fieldName="clientId" fieldDataType="Number" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000715')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerName" fieldName="customerName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.companyName" fieldName="companyName" v-if="companyId == 1 && !isLoggedInAsCustomer" :fieldLabel="getLabelText('GN00001077')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                        <div :class="searchContainerDivClass">
                            <div class="form-group form-float">
                                <VueSelect :useTranslation="useTranslation" :options="statuses.items" :selectedValue="this.search.selectedStatus" @selectchange="statusChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.labelSrch" fieldName="labelSrch" :fieldLabel="getLabelText('strLabel')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.orgName" fieldName="orgName" :fieldLabel="getLabelText('DGN1110608')" :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" v-if="records.length > 0">
                            <tbody>
                                <tr>
                                    <th class="col-xs-1">{{getLabelText("String385")}}</th>
                                    <th class="col-xs-3"><a href="#" @click.prevent="sortBy('ExchHostingId')">{{getLabelText("DGN1119987")}}</a></th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer"><a href="#" @click.prevent="sortBy('CustomerName')">{{getLabelText("GN0000850")}}</a></th>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('DomainName')">{{getLabelText("DGN1110516")}}</a></th>
                                    <th class="col-xs-1">{{getLabelText("DGN1110406")}}</th>
                                    <th class="col-xs-2" v-if="owners.show"><a href="#" @click.prevent="sortBy('Owner')">{{getLabelText("Exh505")}}</a></th>
                                    <th class="col-xs-2 align-center">{{getLabelText("GN0000360")}}</th>
                                </tr>
                                <tr v-for="account in records">
                                    <td v-if="account.Status == 1">{{getLabelText("GN0000222")}}</td>
                                    <td v-else-if="account.Status == 2">{{getLabelText("GN0000302")}}</td>
                                    <td v-else-if="account.Status == 3">{{getLabelText("GN00001545")}}</td>
                                    <td v-else-if="account.Status == 4">{{getLabelText("GN0000348")}}</td>
                                    <td v-else-if="account.Status == 5">{{getLabelText("GN00001546")}}</td>
                                    <td v-else-if="account.Status == 6">{{getLabelText("GN0000861")}}</td>
                                    <td v-else-if="account.Status == 7">{{getLabelText("SPT002056")}}</td>
                                    <td v-else-if="account.Status == 8">{{getLabelText("SPT002057")}}</td>
                                    <td v-else-if="account.Status == 9">{{getLabelText("SPT002058")}}</td>
                                    <td v-else>{{getLabelText("GN0000222")}}</td>

                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-5 row-label">
                                                        {{getLabelText("SPT002807")}}:
                                                    </td>
                                                    <td class="col-xs-8">
                                                        <a v-bind:href="'/RCC/Clients/ExH.aspx?subID='+account.ExchHostingId">{{account.ExchHostingId}}</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-5 row-label">
                                                        {{getLabelText("GN000141")}}:
                                                    </td>
                                                    <td class="col-xs-8">
                                                        {{account.PackageName}}
                                                    </td>
                                                </tr>
                                                <tr v-if="account.Label != ''">
                                                    <td class="col-xs-5 row-label">
                                                        {{getLabelText("StrLabelColon")}}
                                                    </td>
                                                    <td class="col-xs-8">
                                                        {{account.Label}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-5 row-label">
                                                        {{getLabelText("strOrg")}}:
                                                    </td>
                                                    <td class="col-xs-8">
                                                        {{account.OrganizationName}}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>

                                    <td v-if="!isLoggedInAsCustomer">
                                        <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+account.CustomerId+'&Src=C'">
                                            #{{account.CustomerId}} {{account.FirstName}} {{account.LastName}} [{{account.CustCompanyName}}]
                                        </a>
                                    </td>

                                    <td v-if="account.DomainName != ''">{{account.DomainName}}</td>
                                    <td v-else>--</td>

                                    <td><a v-bind:class="[{'disabled':(!account.ServerGroupEnabled || account.DomainName == '' || account.Status == 10 || account.ResellerPackage == 1)}]" v-bind:href="'/RCC/Exchange/ExAccountDetail.aspx?oID='+account.OrganizationId+'&MBManage=1'">{{account.MailBoxCount}}</a></td>

                                    <td v-if="owners.show && account.OwnerId==0">{{ account.Owner }}</td>
                                    <td v-else-if="owners.show">
                                        <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+account.OwnerId+'&RD=1'">{{account.Owner}}</a>
                                    </td>

                                    <td class="align-center">
                                        <a v-bind:class="[{'disabled':(!account.ServerGroupEnabled || account.DomainName == '' || account.Status == 10 || account.ResellerPackage == 1)}, 'btn btn-primary waves-effect']" v-bind:href="'/RCC/Exchange/ExAccountDetail.aspx?oID=' + account.OrganizationId">{{getLabelText("L0086")}}</a>
                                    </td>

                                </tr>

                                <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                            </tbody>
                        </table>
                        <NoRecords v-else />
                    </div>
                </div>
            </div>
        </div>
    </div>

</script>
