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

    <!-- full template HTML here -->

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

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

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

                        <div :class="searchContainerDivClass" v-if="owners.show">
                            <div class="form-group form-float">
                                <VueSelect id="NAT_Owner" :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 :options="sdnServers.items" :selectedValue="this.search.selectedSDNServerId" @selectchange="sdnServersChangeHandler" />
                            </div>
                        </div>

                        <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.clientCompanyName" fieldName="clientCompanyName" v-if="!isLoggedInAsCustomer" :fieldLabel="getLabelText('CustomerCompanyName')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.destinationIP" fieldName="destinationIP" :fieldLabel="getLabelText('DestinationIP')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.natIP" fieldName="natIP" :fieldLabel="getLabelText('NATIP')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.vmName" fieldName="vmName" :fieldLabel="getLabelText('SMI0240')" :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-2"><a href="#" @click.prevent="sortBy('VMName')">{{getLabelText('SMI0240')}}</a></th>
                                    <th class="col-xs-5">{{getLabelText('NATSettings')}}</th>
                                    <th class="col-xs-1 hidden-xs" v-if="owners.show">{{ getLabelText('SPT002811') }}</th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer"><a href="#" @click.prevent="sortBy('CustomerId')">{{ getLabelText('GN0000850') }}</a></th>
                                    <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">

                                    <td>{{ record.VMName }}</td>
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ getLabelText('L00218') }}: </td>
                                                    <td class="col-sm-3 col-xs-6">{{ record.DestinationIP }}</td>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ getLabelText('PrivateInternalIP') }}: </td>
                                                    <td class="col-sm-3 col-xs-6">{{ record.NATIP }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ getLabelText('SMI1898') }}: </td>
                                                    <td class="col-sm-3 col-xs-6"> {{ record.Source }}</td>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ getLabelText('Protocol') }}: </td>
                                                    <td class="col-sm-3 col-xs-6">{{ record.Protocol }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ getLabelText('Description') }}: </td>
                                                    <td class="col-sm-3 col-xs-6">{{ record.NATDescription }}</td>
                                                    <td class="col-sm-3 col-xs-6 row-label">{{ (owners.show ? getLabelText('SDNServerName') + ':' : '') }} </td>
                                                    <td class="col-sm-3 col-xs-6"> {{ (owners.show ? record.SDNServerName : '') }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>

                                    <td v-if="owners.show && record.OwnerId == 0">{{ record.OwnerName }}</td>
                                    <td v-else-if="owners.show"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+record.OwnerId+'&Src=C'">{{ record.OwnerName }}</a></td>
                                    
                                    <td v-if="!isLoggedInAsCustomer"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerId">{{ '#' + record.CustomerId + ' ' + record.CustomerName + (record.CustCompanyName != '' ? ' [' + record.CustCompanyName + ']' : '') }} </a></td>

                                    <td>
                                        <a @click="enableDisableRecord(record.NATId)" class="btn btn-primary waves-effect btnAction">{{ (record.NATIsEnabled ? getLabelText('GN00001025') : getLabelText('GN00001024')) }}</a>

                                        <a :disabled="(record.InUse ? true : null)" v-if="!readOnly"
                                           :title="(record.InUse ? getLabelText('ActionRestrictedForInUse').replace('%record%','NAT') : null)"
                                           @click="confirmRemove" :data-id="record.NATId" :data-name="getLabelText('DestinationIP') + ' (' + record.DestinationIP + ') and ' + getLabelText('NATIP') + ' (' + record.NATIP + ')'" 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>
