<script type="text/x-template" id="addeditsdnalias-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" v-if="ddlCustomers.show">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('GN0000889') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlCustomers" :options="ddlCustomers.items" :selectedValue="recordDTO.CustomerId" @selectchange="customerChangeHandler" :disabled="(recordDTO.AliasId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>
                <div class="row" v-if="ddlSubs.show">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('DGN1119987') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlSubs" :options="ddlSubs.items" :selectedValue="recordDTO.SDNServerId" @selectchange="subsChangeHandler" :disabled="(recordDTO.AliasId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('AliasName') }}: </div>
                    <!--<div class="col-sm-4 col-xs-12">
                        <div class="form-group">
                            <div class="form-line">
                                <input type="text" v-model="recordDTO.AliasName" :maxLength="200" :disabled="(recordDTO.AliasId > 0 ? true : null)" class="form-control" />
                            </div>
                        </div>
                    </div>-->
                    <InputSearch :id="'txtaliasname'" :searchValue="recordDTO.AliasName" :fieldName="'txtaliasname'" :maxLength="200" :containerDivClass="'col-sm-4 col-xs-12'" @inputSearchChange="inputAliasNameChangeHandler" :disabled="(recordDTO.AliasId > 0 ? true : false)" />
                    <!--<div class="lbl-serial-num p-r-40">
                        {{recordDTO.CustomerId + '_' }}
                    </div>
                    <div class="col-sm-3 col-xs-12 padding-left-5px p-r-0">
                        <InputText v-model:fieldValue="recordDTO.AliasName" :maxLength="200" :disabled="(recordDTO.AliasId > 0 ? true : false)" />
                    </div>-->
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('Description') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <InputText v-model:fieldValue="recordDTO.Description" :maxLength="500" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('Type') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect :options="typesFilter.items" :selectedValue="recordDTO.AliasType" @selectchange="aliasTypeChangeHandler" :disabled="(recordDTO.AliasId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="header">
                    <h3 v-html="headerTextType"></h3>
                </div>
                <div class="body">
                    <div class="row">
                        <div class="col-sm-2 col-xs-12 row-label"><strong>{{ getLabelText('Hint') }}: </strong></div>
                        <div class="col-sm-10 col-xs-12 row-label" v-html="typeHint"></div>
                    </div>
                    <div class="row" v-for="(item, index) in recordDTO.Details">
                        <div class="col-sm-2 col-xs-12 row-label">* {{ typeWiseInputLabel }}: </div>
                        <div class="col-sm-3 col-xs-12">
                            <InputText :id="'txt_type' + index + '_' + recordDTO.AliasId" v-model:fieldValue="item.IPOrNetworkOrFQDN" />
                        </div>
                        <div class="lbl-serial-num" v-if="recordDTO.AliasType != 'host' && recordDTO.AliasType != 'port' && recordDTO.AliasType != 'urlips' && recordDTO.AliasType != 'urlports'">/</div>
                        <div class="col-sm-1 col-xs-12" v-if="recordDTO.AliasType != 'host' && recordDTO.AliasType != 'port' && recordDTO.AliasType != 'urlips' && recordDTO.AliasType != 'urlports'">
                            <select :id="'DDL_type' + index + '_' + recordDTO.AliasId" v-model="item.SubnetOrDays" class="vue-select">
                                <option v-if="recordDTO.AliasType != 'urltableips' && recordDTO.AliasType != 'urltableports'" value="0" key="0">0</option>
                                <option v-for="n in (recordDTO.AliasType == 'network' ? 128 : 32)" :value="n" :key="n">
                                    {{ n }}
                                </option>
                            </select>
                        </div>

                        <InputSearch :id="'txttypedesc_' + index" :searchValue="item.Description" :fieldName="'txttypedesc_' + index" :maxLength="500" :fieldLabel="getLabelText('Description')" :containerDivClass="'col-sm-4 col-xs-12'" @inputSearchChange="inputSearchChangeHandler" />

                        <!--<div class="col-sm-4 col-xs-12">
                        <InputText v-model:fieldValue="item.Description" :placeHolderText="getLabelText('Description')" />-->
                        <!--<div class="form-group form-float">
                            <div class="form-line">
                                <input :id="'txt_typedesc' + index + '_' + recordDTO.AliasId" type="text" v-model="item.Description" class="form-control" />
                                <span :for="'txt_typedesc' + index + '_' + recordDTO.AliasId" class="form-label">{{ getLabelText('Description') + ':' }}</span>
                            </div>
                        </div>-->
                        <!--</div>-->
                        <div class="col-sm-1 col-xs-12 row-label" v-if="!recordDTO.IsDefault">
                            <a @click.prevent="removeInputDetail(index)" v-if="index > 0" class="btn btn-primary waves-effect">{{ getLabelText('GN0000278')}} </a>
                        </div>
                    </div>
                    <div class="row" v-if="!recordDTO.IsDefault && recordDTO.AliasType != 'urltableips' && recordDTO.AliasType != 'urltableports'">
                        <div class="col-sm-2 col-xs-12 row-label"></div>
                        <div class="col-xs-10">
                            <a @click.prevent="addMoreItemDetail" class="btn btn-primary waves-effect">{{ getLabelText('AddMore')}} </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <a v-if="!readOnly && !recordDTO.IsDefault" :disabled="(ddlCustomers.items && ddlCustomers.items.length > 0 && ddlSubs.items && ddlSubs.items.length > 0 ? null : true)" @click.prevent="saveRecord" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000281')}} </a>
                        <a @click.prevent="cancelRecord" class="btn btn-primary waves-effect">{{ (!recordDTO.IsDefault ? getLabelText('GN0000572') : getLabelText('String1018'))}} </a>
                    </div>
                </div>

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