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

    <div class="col-xs-12">
        <div class="card">
            <div class="header">
                <div class="displayInlineBlock">
                    <h3>{{ headerText }}</h3>
                </div>
                <a v-bind:href="'/PCC/VPS/SDN/SDN.aspx'" class="btn btn-primary waves-effect pull-right m-t--4px">{{getLabelText('GoBackToServers')}}</a>
            </div>
            <div class="body" v-if="records.length > 0">
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table table-bordered table-striped table-hover">
                            <tbody>
                                <tr>
                                    <th class="col-xs-12">
                                        <div class="row">
                                            <div class="col-xs-3">{{getLabelText('InterfaceName')}}</div>
                                            <div class="col-xs-3">{{ getLabelText('GN0000597') }}</div>
                                            <div class="col-xs-6">{{ getLabelText('UsedFor') }}</div>
                                        </div>
                                    </th>
                                </tr>
                                <tr v-for="(record, index) in records">
                                    <td>
                                        <div class="row">
                                            <div class="col-xs-3">{{ record.InterfaceName }}</div>
                                            <div class="col-xs-3">{{ record.Description }}</div>
                                            <div class="col-xs-6">
                                                <div class="form-group">
                                                    <label :for="'MNGT' + index" class="radio-inline">
                                                        <input type="radio" :id="'MNGT' + index" value="MNGT" v-model="record.InterfaceRole" :disabled="(record.InUse ? true : null)"
                                                               v-on:click="handleTenantCustomerAssignment(record, 'MNGT')">&nbsp;OTHERS
                                                    </label>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <label :for="'WAN' + index" class="radio-inline">
                                                        <input type="radio" :id="'WAN' + index" value="WAN" v-model="record.InterfaceRole" :disabled="(record.InUse ? true : null)"
                                                               v-on:click="handleTenantCustomerAssignment(record, 'WAN')">&nbsp;WAN
                                                    </label>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <label :for="'TENANTS' + index" class="radio-inline">
                                                        <input type="radio" :id="'TENANTS' + index" value="TENANTS" v-model="record.InterfaceRole" :disabled="(record.InUse ? true : null)"
                                                               v-on:click="handleTenantCustomerAssignment(record, 'TENANTS')">&nbsp;TENANTS
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 row-label" v-if="record.InterfaceRole == 'TENANTS'">
                                                <div class="card">
                                                    <div class="header">
                                                        <h3>{{ getLabelText('SMI0369') }}</h3>
                                                    </div>
                                                    <div class="body">
                                                        <div class="row">
                                                            <div class="col-xs-12">
                                                                <VueMultiSelectableSelected :useTranslation="false" :items="record.customers" :id="'customers_' + index" @selectionInfo="selectionCustomerHandler" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </td>
                                </tr>

                                <!--<Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />-->
                            </tbody>
                        </table>

                    </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 v-bind:href="'/PCC/VPS/SDN/SDN.aspx'" class="btn btn-primary waves-effect">{{getLabelText('GoBackToServers')}}</a>
                    </div>
                </div>
            </div>

            <NoRecords v-else />
        </div>

        
    </div>
</script>