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

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

                    <OperationsPanel v-if="!readOnly && isLoggedInAsProvider">
                        <a v-bind:href="'/PCC/VPS/SDN/AddVNet.aspx'" class="btn btn-primary waves-effect btnAction">{{ getLabelText('strAddVNet') }}</a>
                    </OperationsPanel>

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

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

                        <div :class="searchContainerDivClass" v-if="sdnServers.show">
                            <div class="form-group form-float">
                                <VueSelect id="VNet_Servers" :options="sdnServers.items" :selectedValue="this.search.selectedSDNServerId" @selectchange="sdnServersChangeHandler" />
                            </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.vlanId"
                                     fieldName="vlanId"
                                     :fieldLabel="getLabelText('VLanId')"
                                     :containerDivClass="searchContainerDivClass"
                                     @inputSearchChange="inputSearchChangeHandler" />



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



                        <InputSearch :searchValue="search.description"
                                     fieldName="description"
                                     :fieldLabel="getLabelText('Description')"
                                     :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-3">
                                        <a href="#" @click.prevent="sortBy('Description')">{{getLabelText('strVNet')}}</a>
                                    </th>
                                    <th class="col-xs-2" v-if="owners.show">{{getLabelText('strOwner')}}</th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer"><a href="#" @click.prevent="sortBy('CustomerId')"> {{getLabelText('strCustomer')}}</a></th>


                                    <th class="col-xs-1" v-if="sdnServers.show">{{getLabelText('strServer')}}</th>
                                    <th class="col-xs-2">{{getLabelText('strParentInterface')}}</th>
                                    <th class="col-xs-2 align-center">{{ 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('strDescription') }}: </td>
                                                    <td class="col-xs-8">{{ r.Description }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{ getLabelText('strTagId') }}: </td>
                                                    <td class="col-xs-8">{{ r.TagId }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-6 row-label">{{ getLabelText('strIPSubnet') }}: </td>
                                                    <td class="col-xs-6"> {{ (r.IP) + '/' + (r.SubNet) }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-xs-4 row-label">{{ getLabelText('strInterface') }}: </td>
                                                    <td class="col-xs-8">{{ r.API_If }}</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 v-if="sdnServers.show">{{ r.SDNServerName }}</td>
                                    <td>{{ r.ParentInterfaceIf }} [{{ r.ParentInterfaceDesc }}]</td>
                                    <td>
                                        <a v-if="!readOnly" v-bind:href="'/PCC/VPS/SDN/EditDNS.aspx?Id=' + r.VLANId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('EditDNS') }}</a>
                                        <a v-if="!readOnly" :disabled="(r.IsSysDefault ? true : null)" @click="confirmRemove"
                                           :title="(r.IsSysDefault ? getLabelText('ActionRestrictedForDefault').replace('%record%','VNet') : '')"
                                           :data-id="r.VLANId" :data-name="r.Description" 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>
        </div>
    </div>

</script>
