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

    <!-- full template HTML here -->

    <div class="col-xs-12">
        <div class="card">
            <div class="header">
                <h3 v-html="headerText"></h3>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('GN0000980') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <InputText v-model:fieldValue="recordDTO.SDNServerName" :maxLength="200" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('DGN1110096') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect :options="ddlProviders.items" :selectedValue="recordDTO.SDNProviderId" @selectchange="providersChangeHandler" :disabled="(recordDTO.SDNServerId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('SelectServerGroup') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect :options="ddlServerGroup.items" :selectedValue="recordDTO.VPSServerGroupId" @selectchange="serverGroupChangeHandler" :disabled="(recordDTO.SDNServerId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('HighAvailableMember') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <input type="checkbox" v-model="recordDTO.IsHighAvailable" :disabled="(recordDTO.SDNServerId > 0 ? true : null)" />
                    </div>
                </div>

                <div class="row" v-if="recordDTO.IsHighAvailable">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('DGN1110499') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <select v-model="recordDTO.HARole" class="vue-select" :disabled="(recordDTO.SDNServerId > 0 ? true : null)"
                                    @change="roleChangeHandler">
                                <option value="master">{{ getLabelText('GN0000915') }}</option>
                                <option value="slave">{{ getLabelText('GN0000916') }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row" v-if="recordDTO.IsHighAvailable && recordDTO.HARole == 'master'">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('HighAvailableGroupName') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <InputText v-model:fieldValue="recordDTO.HAGroupName" :maxLength="100" :disabled="(recordDTO.SDNServerId > 0 ? true : false)" />
                    </div>
                </div>
                <div class="row" v-else-if="recordDTO.IsHighAvailable && recordDTO.HARole == 'slave' /*&& ddlHAGroupName && ddlHAGroupName.items > 0*/">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('HighAvailableGroupName') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlHAGroupName" :options="ddlHAGroupName.items" :selectedValue="recordDTO.HAGroupName" @selectchange="serverGroupChangeHandler" :disabled="(recordDTO.SDNServerId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('GN000909') }}: </div>
                    <div class="col-sm-8 col-xs-12">
                        <InputText v-model:fieldValue="recordDTO.APIURL" :maxLength="500" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('Dev611') }}: </div>
                    <div class="col-sm-8 col-xs-12">
                        <div class="form-group">
                            <div class="form-line">
                                <input type="password" v-model="recordDTO.APIKey" class="form-control" maxlength="4000" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('IsEnabled') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <input type="checkbox" v-model="recordDTO.IsEnabled" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <a v-if="!readOnly" @click.prevent="saveRecord" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000281')}} </a>
                        <a @click.prevent="cancelRecord" class="btn btn-primary waves-effect">{{ getLabelText('GN0000572')}} </a>
                    </div>
                </div>

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