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

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

                    <OperationsPanel>
                        <!-- No add button for now -->
                    </OperationsPanel>

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

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



                        <InputSearch :searchValue="search.customerId" v-if="!isLoggedInAsCustomer"
                                     fieldName="customerId"
                                     :fieldLabel="getLabelText('strCustomerId')"
                                     :containerDivClass="searchContainerDivClass"
                                     @inputSearchChange="inputSearchChangeHandler" />

                        <InputSearch :searchValue="search.customerName" v-if="!isLoggedInAsCustomer"
                                     fieldName="customerName"
                                     :fieldLabel="getLabelText('GN0000268')"
                                     :containerDivClass="searchContainerDivClass"
                                     @inputSearchChange="inputSearchChangeHandler" />

                        <InputSearch :searchValue="search.customerCompanyName" v-if="!isLoggedInAsCustomer"
                                     fieldName="customerCompanyName"
                                     :fieldLabel="getLabelText('CustomerCompanyName')"
                                     :containerDivClass="searchContainerDivClass"
                                     @inputSearchChange="inputSearchChangeHandler" />

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

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

                        <!-- Cloud Networking Server -->
                        <div :class="searchContainerDivClass" v-if="!isLoggedInAsCustomer">
                            <div class="form-group form-float">
                                <VueSelect id="VMIP_Servers"
                                           :options="sdnServers.items"
                                           :selectedValue="search.selectedSDNServerId"
                                           @selectchange="sdnServersChangeHandler" />

                            </div>
                        </div>

                        <!-- VPS Server -->
                        <div :class="searchContainerDivClass" v-if="!isLoggedInAsCustomer">
                            <div class="form-group form-float">
                                <VueSelect id="VMIP_VPSServers"
                                           :options="vpsServers.items"
                                           :selectedValue="search.selectedVPSServerId"
                                           @selectchange="vpsServersChangeHandler" />

                            </div>
                        </div>

                    </SearchPanel>

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

                    <!-- Result -->
                    <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="isLoggedInAsCustomer ? 'col-xs-4' : 'col-xs-3'">{{ getLabelText('M0902') }}</th>
                                    <th :class="isLoggedInAsCustomer ? 'col-xs-4' : 'col-xs-3'">{{ getLabelText('strDetails') }}</th>


                                    <th class="col-xs-2" v-if="owners.show">{{getLabelText('strOwner')}}</th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer">{{getLabelText('strCustomer')}}</th>
                                    <th :class="isLoggedInAsCustomer ? 'col-xs-2 align-center' : 'col-xs-1 align-center'" v-if="!readOnly">
                                        {{ getLabelText('GN0000360') }}
                                    </th>




                                    
                                </tr>

                                <tr v-for="r in records">
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('SMI0240')}}:</td>
                                                    <td class="col-xs-6">{{ r.VMName }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('strHostName')}}:</td>
                                                    <td class="col-xs-6">{{ r.HostName}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('String61')}}:</td>
                                                    <td class="col-xs-6">{{ r.SubscriptionId }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('GN000174')}}:</td>
                                                    <td class="col-xs-6">{{ r.IPAddress }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('MACAddress')}}:</td>
                                                    <td class="col-xs-6">{{ r.MAC}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('strStatic')}}:</td>
                                                    <td class="col-xs-6">{{ r.IsStatic ? 'Yes' : 'No' }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('SDNServerName')}}:</td>
                                                    <td class="col-xs-6">{{ r.SDNServer }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{getLabelText('VPSServer')}}:</td>
                                                    <td class="col-xs-6">{{ r.VPSServer }}</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </td>



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

                                    <td v-if="!isLoggedInAsCustomer"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + r.CustomerID">{{ '#' + r.CustomerID + ' ' + r.CustomerName + ' ['+ r.CustomerCompany + ']' }} </a></td>
                                    <td class="col-xs-6 align-center" v-if="r.IsStatic" >
                                                 
                                        <a v-if="!readOnly" :data-companyid="r.CompanyId" :data-customerid="r.CustomerID" :data-vpsid="r.VPSId" :data-id="r.RecordId" :data-dhcpipid="r.DHCPIPId" :data-ip="r.IPAddress" :data-mac="r.MAC" :data-sdnServerid="r.SDNServerId" @click="confirmRemove" class="btn btn-primary waves-effect btnAction"
                                           :disabled="(r.NATId != '0' ? true : null)" :title="(r.NATId != '0' ? getLabelText('IPRemoveToolTip') : null)">{{ getLabelText('RemoveStaticIP')
                                        }}</a>

                                    </td>
                                    <td class="col-xs-6 align-center" v-else>
                                        <a v-if="!readOnly" @click.prevent="showAssignIPChangePopUP(r.CompanyId,r.CustomerID,r.RecordId,r.SDNServerId,r.MAC,r.DHCPIPId)" class="btn btn-primary waves-effect btnAction">{{ getLabelText('AssignStaticIP') }}</a>
                                    </td>



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

                        <NoRecords v-else />
                    </div>

                    <!-- Assign IP Model Popoup -->

                    <ModalPopUp v-if="showIPModal" :id="'assignIPModel'" :parentContext="parentContext" :modalTitle="getLabelText('AssignStaticIP')"
                                :yesButtonText="getLabelText('DEV1181')" :noButtonText="getLabelText('GN0000572')" @onYes="assignIP" @onNo="mpModelEventHandler">


                        <div class="row">
                            <div class="col-xs-3 row-label"><label>{{ getLabelText('MACAddress') }}:</label></div>
                            <div class="col-xs-4">
                                <div class="col-xs-3"><label>{{macaddress}}</label></div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-xs-3 row-label"><label>{{ getLabelText('GN0000597') }}:</label></div>
                            <div class="col-xs-4">

                                <InputText v-model:fieldValue="description" :maxLength="500" />

                            </div>
                        </div>


                        <div class="row">
                            <div class="col-xs-3 row-label"><label>{{ getLabelText('SPT002376') }}:</label></div>
                            <div class="col-xs-4">
                                <div class="form-group form-float">
                                    <VueSelect id="ddlAvaIPs" :options="avaIPs.items" :selectedValue="selectedIP" @selectchange="ipChangeHandler" />
                                </div>
                            </div>
                        </div>
                    </ModalPopUp>


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

</script>
