<script type="text/x-template" id="vpsschedules-template">
    <!-- full template HTML here -->
    <div class="col-xs-12" v-if="!this.showDetail">
        <div class="card">

            <div class="body">
                <div class="row">
                    <OperationsPanel>
                        <button id="Btn_AddSchedule" class="btn btn-primary waves-effect btnAction" v-if="!readOnly" @click.prevent="newSchedule();">{{getLabelText("Add")}}</button>

                    </OperationsPanel>

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

                        <div :class="searchContainerDivClass" v-if="owners.show">
                            <div class="form-group form-float">
                                <VueSelect :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.subscriptionId" fieldName="subscriptionId" fieldDataType="Number" :fieldLabel="getLabelText('SPT002807')" :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.clientCompanyName" fieldName="clientCompanyName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('CustomerCompanyName')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerName" fieldName="customerName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.vmName" fieldName="vmName" :fieldLabel="getLabelText('VPS002')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

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

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

                    </SearchPanel>

                    <ModalPopUp v-if="showModal" :id="'logs'" :parentContext="parentContext" :modalTitle="modalTitle"
                                :yesButtonText="yesText" :noButtonText="noText">
                        <table class="table table-bordered table-striped table-hover table-layout-fixed" cellspacing="0" rules="all" border="1" v-if="scheduleLogs.length > 0">
                            <tbody>
                                <tr>
                                    <th class="col-xs-3">{{ getLabelText('GN0000779') }}</th>
                                    <th class="col-xs-2">{{ getLabelText('GN0000277') }}</th>
                                    <th class="col-xs-2">{{ getLabelText('GN0000778') }}</th>
                                    <th class="col-xs-5">{{ getLabelText('GN0000774') }}</th>
                                </tr>
                                <tr v-for="log in scheduleLogs">
                                    <td class="col-xs-3">{{ log.time}}</td>
                                    <td class="col-xs-2">{{ log.action}}</td>
                                    <td class="col-xs-2">{{ log.result}}</td>
                                    <td class="col-xs-5" v-html="log.message"></td>
                                </tr>
                            </tbody>
                        </table>
                        <NoRecords v-else />
                    </ModalPopUp>

                    <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-5"><a href="#" @click.prevent="sortBy('VMName')">{{ getLabelText('M0902') }}</a></th>
                                    <th class="col-xs-5">{{ getLabelText('strSchedule')}}</th>
                                    <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('M0902') }}: </td>
                                                    <td class="col-xs-4">
                                                        <a v-bind:href="'/RCC/VPS/VPSAccountDetail.aspx?OID=' + record.VPSId + '&Tab=2'">{{record.VMName}}</a>
                                                    </td>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('String385') }}: </td>
                                                    <td class="col-xs-4">
                                                        {{ getAccountStatus(record.Status, record.IsSingleVM, record.SubStatus) }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('NetBIOS') }}: </td>
                                                    <td class="col-xs-4">{{ record.VMHostName }}</td>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('DEV1130') }}: </td>
                                                    <td class="col-xs-4"> {{ (record.State == '--' ? record.State : record.State + ' [' + record.TimeUpdated + ']') }}</td>
                                                </tr>
                                                <tr v-if="owners.show">
                                                    <td class="col-xs-2 row-label">{{ getLabelText('strHost') }}: </td>
                                                    <td class="col-xs-4">{{ record.IP }}</td>
                                                </tr>
                                                <tr v-if="!isLoggedInAsCustomer">
                                                    <td class="col-xs-2 row-label">
                                                        {{ getLabelText('GN0000850') }}:
                                                    </td>
                                                    <td class="col-xs-4">
                                                        <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerId">{{ '#' + record.CustomerId + ' ' + record.Name + (record.CustCompanyName != '' ? ' [' + record.CustCompanyName + ']' : '') }} </a>
                                                    </td>
                                                    <td v-if="owners.show" class="col-xs-2 row-label">
                                                        {{ getLabelText('SPT002811') }}:
                                                    </td>
                                                    <td class="col-xs-4" v-if="owners.show && record.OwnerId == 0">
                                                        {{ record.OwnerName }}
                                                    </td>
                                                    <td class="col-xs-4" v-else-if="owners.show">
                                                        <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+record.OwnerId+'&Src=C'">{{ record.OwnerName }}</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('strDays') }}: </td>
                                                    <td class="col-xs-3" colspan="3">
                                                        <div style="max-width:200px">
                                                            <div class="form-group">
                                                                <input type="checkbox" disabled="disabled" :checked="record.Monday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Tuesday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Wednesday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Thursday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Friday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Saturday" />
                                                                &nbsp;&nbsp;
                                                                <input type="checkbox" disabled="disabled" :checked="record.Sunday" />
                                                                &nbsp;&nbsp;
                                                            </div>
                                                        </div>
                                                        <div style="max-width:200px">
                                                            <div style="font-size:0.80em;font-weight:bold">
                                                                <span>MO</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                                <span>TU</span>
                                                                &nbsp;&nbsp;
                                                                <span>WE</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                                <span>TH</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                                <span>FR</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                                <span>SA</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                                <span>SU</span>
                                                                &nbsp;&nbsp;&nbsp;
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('strEnabled') }}: </td>
                                                    <td class="col-xs-3">
                                                        {{ (record.IsEnabled ? getLabelText('strYes') : getLabelText('strNo')) }}
                                                    </td>
                                                    <td class="col-xs-2 row-label"></td>
                                                    <td class="col-xs-3"></td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('Lync179') }}: </td>
                                                    <td class="col-xs-3" colspan="3">{{ record.TimeZoneTime }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{ getLabelText('HVServer56') + ' ' + getLabelText('GN0000779') }}: </td>
                                                    <td class="col-xs-3">{{ record.OffTime }}</td>
                                                    <td class="col-xs-2 row-label" v-if="record.AutoOn">{{ getLabelText('HVServer55') + ' ' + getLabelText('GN0000779') }}: </td>
                                                    <td class="col-xs-3" v-if="record.AutoOn"> {{ record.OnTime }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td class="align-center" v-if="!readOnly">

                                        <ul class="option-menu Div_OpsRow">
                                            <li class="dropdown">
                                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    <i class="material-icons">menu</i>
                                                </a>
                                                <ul class="dropdown-menu pull-right">
                                                    <li>
                                                        <a @click.prevent="viewHistory" :data-id="record.ScheduleId">{{ getLabelText('View') }} {{ getLabelText('History') }}</a>
                                                    </li>
                                                    <li v-if="record.IsEnabled">
                                                        <a @click.prevent="disableSchedule" :data-id="record.ScheduleId">{{ getLabelText('strDisable') }}</a>
                                                    </li>
                                                    <li v-if="!record.IsEnabled">
                                                        <a @click.prevent="enableSchedule" :data-id="record.ScheduleId">{{ getLabelText('strEnable') }}</a>
                                                    </li>
                                                    <li>
                                                        <a @click.prevent="deleteSchedule" :data-id="record.ScheduleId" :data-vmname="record.VMName">{{ getLabelText('GN0000377') }}</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </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>
    <div v-if="this.showDetail" class="col-xs-12">
        <ScheduleDetail :readOnly="this.readOnly" @completed="this.scheduleSaveCompleted" @cancelled="this.scheduleSaveCancelled"></ScheduleDetail>
    </div>
</script>
