<script type="text/x-template" id="vpssdnpublicippool-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/AddEditPublicIP.aspx'" class="btn btn-primary waves-effect btnAction">{{ getLabelText('AddEditPublicIPs') }}</a>
                    </OperationsPanel>

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

                        <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.ipAddressFilter" fieldName="ipAddressFilter" :fieldLabel="getLabelText('GN000174')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.subnetFilter" fieldName="subnetFilter" :fieldLabel="getLabelText('GN000189')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.interfaceFilter" fieldName="interfaceFilter" :fieldLabel="getLabelText('Interface')" :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('IPAddress')">{{getLabelText('GN000174')}}</a></th>
                                    <th class="col-xs-2">{{ getLabelText('GN000189') }}</th>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('SDNServerName')">{{ getLabelText('SDNServerName') }}</a></th>
                                    <th class="col-xs-3"><a href="#" @click.prevent="sortBy('API_if')">{{ getLabelText('Interface') }}</a></th>
                                    <th class="col-xs-2">{{ getLabelText('GN0000597') }}</th>
                                    <th class="col-xs-1 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">

                                    <td>{{ record.IPAddress }}</td>
                                    <td>{{ record.Subnet }}</td>
                                    <td>{{ record.SDNServerName }}</td>
                                    <td>{{ record.API_if + ' (' + record.API_descr + ')' }}</td>
                                    <td>{{ record.Description }}</td>
                                    <td>
                                        <!--<a v-bind:href="'/PCC/VPS/SDN/AddEditPublicIP.aspx?Id=' + record.IPAddressId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000276') }}</a>-->
                                        <a :disabled="(record.InUse ? true : null)" v-if="!readOnly" :title="(record.InUse ? getLabelText('ActionRestrictedForInUse').replace('%record%','Public IP') : null)" 
                                           @click="confirmRemove" :data-id="record.IPAddressId" :data-ip="record.IPAddress" :data-subnet="record.Subnet" 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>