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

    <div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="row">

                    <div class="col-xs-12 infoMsg YOverFlowMsg">
                        <strong>{{ getLabelText('FirewallRulesDisplayOrderNotice') }}</strong>
                    </div>

                    <OperationsPanel v-if="!readOnly">
                        <a v-bind:href="'/PCC/VPS/SDN/FirewallRule.aspx'" class="btn btn-primary waves-effect btnAction">{{ getLabelText('AddFireWallRule') }}</a>
                    </OperationsPanel>

                    <SearchPanel id="vpssdnfirewall-list" :showClearButton="showClearButton" @onSearch="doSearch" @onClear="doClearSearch">

                        <div :class="searchContainerDivClass" v-if="owners.show">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Owners" :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                            </div>
                        </div>

                        <div :class="searchContainerDivClass" v-if="sdnServers.show">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Servers" :options="sdnServers.items" :selectedValue="this.search.selectedSDNServerId" @selectchange="sdnServersChangeHandler" />
                            </div>
                        </div>

                        <div :class="searchContainerDivClass" v-if="sdnInterfaces.show">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Interfaces" :options="sdnInterfaces.items" :selectedValue="this.search.interfaceName" @selectchange="interfacesChangeHandler" />
                            </div>
                        </div>

                        <InputSearch :searchValue="search.customerId" v-if="!isLoggedInAsCustomer" fieldName="customerId" :fieldLabel="getLabelText('strCustomerId')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerName" v-if="!isLoggedInAsCustomer" fieldName="customerName" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.customerCompanyName" v-if="!isLoggedInAsCustomer" fieldName="customerCompanyName" :fieldLabel="getLabelText('CustomerCompanyName')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <!--<InputSearch :searchValue="search.interfaceName" fieldName="interfaceName" :fieldLabel="getLabelText('Interface')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />-->
                        <InputSearch :searchValue="search.source" fieldName="source" :fieldLabel="getLabelText('Source')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                        <InputSearch :searchValue="search.destination" fieldName="destination" :fieldLabel="getLabelText('Destination')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                        <div :class="searchContainerDivClass">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Protocol" :options="protocols.items" :selectedValue="search.protocol" @selectchange="protocolChangeHandler" />
                            </div>
                        </div>

                        <div :class="searchContainerDivClass">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Action" :options="actions.items" :selectedValue="search.action" @selectchange="actionChangeHandler" />
                            </div>
                        </div>

                        <div :class="searchContainerDivClass">
                            <div class="form-group form-float">
                                <VueSelect id="FW_Enabled" :options="enabledOptions.items" :selectedValue="search.enabled" @selectchange="enabledChangeHandler" />
                            </div>
                        </div>

                    </SearchPanel>

                    <div class="col-xs-12" v-if="!readOnly && sdnInterfacesInput.show">
                        <div class="card">
                            <div class="header">
                                <h3>{{ getLabelText('ResetFirewallRulesToDefault') }}</h3>
                            </div>
                            <div class="body">
                                <div class="row">
                                    <div class="col-md-2 col-sm-4 col-xs-12 row-label">* {{ getLabelText('SelectInterface') }}: </div>
                                    <div class="col-md-3 col-sm-4 col-xs-12">
                                        <div class="form-group form-float">
                                            <VueSelect id="sdnInterfacesInput" :options="sdnInterfacesInput.items" :selectedValue="this.sdnInterfacesInputValue" @selectchange="sdnInterfacesInputValueChangeHandler" />
                                        </div>
                                    </div>
                                    <div class="col-md-7 col-sm-4 col-xs-12">
                                        <a @click="confirmReset" class="btn btn-primary waves-effect btnAction">{{ getLabelText('ResetFirewallRulesToDefault') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12" v-if="isLoading">
                        <Loading />
                    </div>

                    <div class="col-xs-12" v-else>
                        <table class="table table-bordered table-striped table-hover" v-if="records.length > 0">
                            <tbody>
                                <tr>
                                    <th class="col-xs-6">{{getLabelText('strRuleSettings')}}</th>
                                    <th class="col-xs-2" v-if="owners.show">{{getLabelText('strOwner')}}</th>
                                    <th class="col-xs-2" v-if="!isLoggedInAsCustomer">{{getLabelText('strCustomer')}}</th>
                                    <th class="col-xs-2 align-center">{{ getLabelText('GN0000360') }}</th>
                                </tr>

                                <tr v-for="r in records">
                                    <td>
                                        <table class="table small">
                                            <tbody>
                                                <tr>
                                                    <td class="col-xs-2 row-label">{{getLabelText('strDescription')}}:</td>
                                                    <td class="col-xs-4">{{ r.Description }}</td>
                                                    <td class="col-xs-2 row-label">{{getLabelText('SMI1898')}}:</td>
                                                    <td class="col-xs-4">{{ r.Source}}</td>
                                                </tr>

                                                <tr>
                                                    <td class="col-xs-2 row-label">{{getLabelText('strInterface')}}:</td>
                                                    <td class="col-xs-4">{{ r.InterfaceDesc }}</td>
                                                    <td class="col-xs-2 row-label">{{getLabelText('strDestination')}}:</td>
                                                    <td class="col-xs-4">{{ r.Destination }}</td>
                                                </tr>

                                                <tr>
                                                    <td class="col-xs-2 row-label">{{getLabelText('strEnabled')}}:</td>
                                                    <td class="col-xs-4">{{ r.IsEnabled == 1 || r.IsEnabled === true ? 'Yes' : 'No' }}</td>
                                                    <td class="col-xs-2 row-label">{{getLabelText('Log')}}:</td>
                                                    <td class="col-xs-4">{{ r.LogEnabled == 1 || r.IsEnabled === true ? 'Enabled' : 'Disabled' }}</td>
                                                </tr>

                                                <tr>
                                                    <td class="col-xs-2 row-label">{{getLabelText('GN0000277')}}:</td>
                                                    <td class="col-xs-4">{{ r.Action }}</td>
                                                    <td class="col-xs-2 row-label" v-if="sdnServers.show">{{getLabelText('DGN1110254')}}:</td>
                                                    <td class="col-xs-4" v-if="sdnServers.show">{{ r.SDNServerName }}</td>
                                                </tr>

                                                <tr>
                                                    <td class="col-xs-2 row-label">{{getLabelText('SMI0461')}}:</td>
                                                    <td class="col-xs-4">{{ r.Protocol }}</td>
                                                    <td class="col-xs-2 row-label">{{getLabelText('PriorityOrder')}}:</td>
                                                    <td class="col-xs-4">
                                                        <InputText v-model:fieldValue="r.DisplayOrder" fieldDataType="number" :disabled="(this.search.interfaceName == '-1' ? true : false)"
                                                                   :tooltip="(this.search.interfaceName == '-1' ? getLabelText('FirewallRulesDisplayOrderNotice') : null)" />
                                                    </td>
                                                </tr>
                                            </tbody>

                                        </table>
                                    </td>

                                    <td v-if="owners.show && r.OwnerId == 0">{{ r.OwnerName }}</td>
                                    <td v-else-if="owners.show"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+r.OwnerId+'&Src=C'">{{ r.OwnerName }}</a></td>

                                    <td v-if="!isLoggedInAsCustomer"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + r.CustomerID">{{ '#' + r.CustomerID + ' ' + r.CustomerName + ' ['+ r.CustomerCompany + ']' }} </a></td>

                                    <td>
                                        <a v-bind:href="'/PCC/VPS/SDN/FirewallRule.aspx?Id=' + r.RuleId" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000276') }}</a>
                                        <a v-if="!readOnly" :disabled="(r.IsDefault || r.InUse ? true : null)" @click="confirmRemove"
                                           :title="(r.InUse ? getLabelText('ActionRestrictedForInUse').replace('%record%','firewall rule') : (r.IsDefault ? getLabelText('ActionRestrictedForDefault').replace('%record%','firewall rule') : ''))"
                                           :data-id="r.RuleId" :data-name="r.Description" class="btn btn-primary waves-effect btnAction">{{ getLabelText('GN0000278') }}</a>
                                    </td>
                                </tr>

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

                        <NoRecords v-else />
                    </div>

                    <div class="col-xs-12" v-if="!readOnly && this.search.interfaceName != '-1' && records.length > 0">
                        <a @click="updatePriorityOrder" class="btn btn-primary waves-effect btnAction">{{ getLabelText('SavePriorityOrder') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</script>
