<script type="text/x-template" id="addeditsdnat-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="!isLoggedInAsCustomer">
                    <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">
                    <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.NATDescription" :maxLength="500" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('NATEnabled') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <input type="checkbox" v-model="recordDTO.NATIsEnabled" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('PrivateInternalIP') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlNATIP" :options="ddlNATIP.items" :selectedValue="selectedNATValue" @selectchange="natIPChangeHandler" :disabled="(recordDTO.NATId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('SMI0461') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlProtocol" :options="ddlProtocol.items" :selectedValue="recordDTO.Protocol" @selectchange="protocolChangeHandler" :disabled="(recordDTO.NATId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('SMI1898') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlSource" :options="ddlSource.items" :selectedValue="recordDTO.Source" @selectchange="sourceChangeHandler" :disabled="(recordDTO.NATId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 col-xs-12 row-label">* {{ getLabelText('L00218') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect id="ddlDestinationIP" :options="ddlDestinationIP.items" :selectedValue="recordDTO.DestinationIPAddressId" @selectchange="destinationIPChangeHandler" :disabled="(recordDTO.NATId > 0 ? true : false)" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <a v-if="!readOnly" @click.prevent="saveRecord" class="btn btn-primary waves-effect btnAction"
                           :disabled="(ddlCustomers.items && ddlCustomers.items.length > 0
                            && ddlNATIP.items && ddlNATIP.items.length > 0
                            && ddlDestinationIP.items && ddlDestinationIP.items.length > 0
                            && ddlSource.items && ddlSource.items.length > 0
                            ? null : true)"
                            >{{ 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>