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

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

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

                        <InputSearch :searchValue="search.serverName" fieldName="serverName" :fieldLabel="getLabelText('SDNServerName')" :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('SDNServerName')">{{getLabelText('SDNServerName')}}</a></th>
                                    <th class="col-xs-2">{{ getLabelText('DGN1110096') }}</th>
                                    <th class="col-xs-2"><a href="#" @click.prevent="sortBy('Name')">{{ getLabelText('strServerGroup') }}</a></th>
                                    <th class="col-xs-3">{{ getLabelText('GN000909') }}</th>
                                    <th class="col-xs-1">{{ getLabelText('HighAvailable') }}</th>
                                    <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>
                                <tr v-for="record in records">

                                    <td v-html="record.SDNServerName + (record.IsHighAvailable ? ' [' + record.HAGroupName + ']' + '<br/><small>' + getLabelText('USM0063') + ': ' + (record.IsMaster ? getLabelText('GN0000915') : getLabelText('GN0000916') + '</small>') : '')"></td>
                                    <td>{{ record.ProviderName }}</td>
                                    <td>{{ record.Name }}</td>
                                    <td>{{ record.API_URL }}</td>
                                    <td v-html="(record.IsHighAvailable ? getLabelText('strYes') : getLabelText('strNo'))"></td>
                                    <td>
                                        <a v-if="!readOnly && (record.IsMaster || !record.IsHighAvailable)" @click.prevent="manageInterfaces" :data-id="record.SDNServerId" :data-name="record.SDNServerName" class="btn btn-primary waves-effect btnAction">{{ getLabelText('ManageInterfaces')}} </a>
                                        <a v-bind:href="'/PCC/VPS/SDN/AddEditSDNServer.aspx?Id=' + record.SDNServerId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000276') }}</a>
                                        <a v-if="!readOnly && !record.InUse" @click="confirmRemove" :data-id="record.SDNServerId" :data-name="record.SDNServerName" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000278') }}</a>
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                        <NoRecords v-else />
                    </div>
                </div>
            </div>
        </div>
    </div>


</script>