<script type="text/x-template" id="addeditsdnpublicippool-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="ddlSDNServers.show">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('GN0001112') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect :options="ddlSDNServers.items" :selectedValue="recordDTO.SDNServerId" @selectchange="sdnServersChangeHandler" />
                        </div>
                    </div>
                </div>
                <div class="row" v-if="ddlSDNInterfaces.show">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('SelectInterface') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <VueSelect :options="ddlSDNInterfaces.items" :selectedValue="recordDTO.InterfaceId" @selectchange="sdnInterfacesChangeHandler" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('IPAddresses') }}: </div>
                    <div class="col-sm-9 col-xs-12">
                        <textarea v-model="recordDTO.IPAddress" rows="5" class="form-control" />
                    </div>

                    <div class="col-sm-3 col-xs-12 row-label"></div>
                    <div class="col-sm-9 col-xs-12 row-label" v-html="getLabelText('IPsCommaListNotice')"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12 row-label"><strong>(OR)</strong></div>
                </div>

                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('SMI0789') }}: </div>
                    <div class="col-sm-5 col-xs-12">
                        <div class="form-group">
                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <span class="btn btn-primary btn-file">
                                    <span class="fileupload-new">{{ getLabelText('strSelectFile') }}</span>
                                    <span class="fileupload-exists">{{ getLabelText('GN0000385') }}</span>
                                    <input type="file" @change="onFileChange" />
                                </span>
                                <span class="fileupload-preview"></span>
                                <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-12">
                        <a href="../../../Template/IPAddressesSample.csv" target='_blank' class='btn btn-primary waves-effect'>{{ getLabelText('SMI100') }}</a>
                    </div>                    
                </div>

                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label"></div>
                    <div class="col-sm-9 col-xs-12 row-label" v-html="getLabelText('PublicIPCSVNotice')"></div>
                </div>

                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('GN000189') }}: </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="form-group form-float">
                            <select v-model="recordDTO.Subnet" class="vue-select">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">* {{ getLabelText('strDescription') }}: </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-xs-12">
                        <a v-if="!readOnly" :disabled="(ddlSDNServers.items && ddlSDNServers.items.length > 0 && ddlSDNInterfaces.items && ddlSDNInterfaces.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">{{ getLabelText('GN0000572')}} </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>