<%@ page title="" language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="PCC_VPS_SDN, MachSol.MachPanel.Web" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" runat="Server">

    <!-- Include the external template so the DOM template is available before the module runs -->
    <!--#include virtual="../../../Components/VPS/SDN/SDNServers.html" -->
    <!--#include virtual="../../../Components/VPS/SDN/PublicIPs.html" -->
    <!--#include virtual="../../../Components/VPS/SDN/VMIPBindings.html" -->
    <!--#include virtual="../../../Components/VPS/SDN/VNet.html" -->
    <!--#include virtual="../../../Components/VPS/SDN/Aliases.html" -->
    <!--#include virtual="../../../Components/VPS/SDN/FirewallRules.html -->
    <!--#include virtual="../../../Components/VPS/SDN/NAT.html -->

    <script type="module">

        import { createApp } from 'vue'
        import SDNServers from '/Components/VPS/SDN/SDNServers.js?v=3.4'
        import PublicIPPool from '/Components/VPS/SDN/PublicIPs.js?v=3.4'
        import VMIPBindings from '/Components/VPS/SDN/VMIPBindings.js?v=3.4'
        import VNet from '/Components/VPS/SDN/VNet.js?v=3.4'
        import Aliases from '/Components/VPS/SDN/Aliases.js?v=3.4'
        import FirewallRules from '/Components/VPS/SDN/FirewallRules.js?v=3.4'
        import NAT from '/Components/VPS/SDN/NAT.js?v=3.4'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.4'
        import { getLabelText } from '/Components/Common/utils.js?v=3.4'


        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    vpsServerGroupsFilter: <%= VPSServerGroupsFilter %>,
                    sdnServersFilter: <%= SDNServersFilter %>,
                    vpsServersFilter: <%= VPSServersFilter %>,
                    sdnInterfacesFilter: <%= SDNInterfacesFilter %>,
                    sdnInterfacesForInput: <%= SDNInterfacesForInput %>,
                    isLoggedInAsProvider: <%= Helper.IsLoggedInAsProvider.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    isLoggedInAsCustomer: <%= Helper.IsLoggedInAsCustomer.ToString().ToLower() %>,
                    customerId: '<%= IIF(Helper.IsLoggedInAsCustomer, Session("CustomerId"), 0) %>',
                    aliasTypesFilter: {
                        show: true,
                        initialValue: 'all',
                        items: [
                            { text: this.getLabelText('Lync033'), value: 'all' },
                            { text: 'Host(s)', value: 'host' },
                            { text: 'Network(s)', value: 'network' },
                            { text: 'Port(s)', value: 'port' },
                            //{ text: 'URL IP(s)', value: 'urlips' },
                            //{ text: 'URL Port(s)', value: 'urlports' },
                            //{ text: 'URL Table IP(s)', value: 'urltableips' },
                            //{ text: 'URL Table Port(s)', value: 'urltableports' }
                        ]
                    },
                    currentTab: 0,
                    tabPanels: []
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);

                    //if (this.currentTab == 5)
                    //    displayInfoMsg();
                },
            },
            components: {
                TabContainer,
                SDNServers,
                PublicIPPool,
                VMIPBindings,
                VNet,
                Aliases,
                FirewallRules,
                NAT,
            },
            created: function () {

                this.tabPanels = [{ text: this.getLabelText('strServers'), enabled: this.isLoggedInAsProvider, hideTabs: [] },
                { text: this.getLabelText('strPublicIPs'), enabled: this.isLoggedInAsProvider, hideTabs: [] },
                { text: this.getLabelText('VirtualNetworks'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('Aliases'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('strFirewallRules'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('StaticDHCPMapping'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('NATRules'), enabled: true, hideTabs: [] }];

                if (!this.isLoggedInAsProvider)
                    this.activeTabChanged(2);

                let urlParams = new URLSearchParams(window.location.search);
                var vm = this;

                if (urlParams.has('TI')) {
                    this.activeTabChanged(Number(urlParams.get('TI')));
                }
                if (urlParams.get('M') == 1) {
                    displaySuccessMsg(this.getLabelText('EGN0000011'));
                }
            },
            updated: function () {
                updateSelectInterface();
                AdminBSBThemeChanges();
            },
            template: `

<TabContainer :id="'tpsdn'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>
                    
<SDNServers v-if="currentTab == 0" :readOnly="readOnly" :vpsServerGroupsFilter="vpsServerGroupsFilter" />
<PublicIPPool v-if="currentTab == 1" :readOnly="readOnly" :sdnServersFilter="sdnServersFilter" />
<VNet v-if="currentTab == 2" :readOnly="readOnly" :customerId="customerId" :sdnServersFilter="sdnServersFilter"
    :isLoggedInAsProvider="isLoggedInAsProvider" :isLoggedInAsCustomer="isLoggedInAsCustomer" />
<Aliases v-if="currentTab == 3" :readOnly="readOnly" :customerId="customerId" :isLoggedInAsCustomer="isLoggedInAsCustomer" :aliasTypesFilter="aliasTypesFilter" />
<FirewallRules v-if="currentTab == 4" :readOnly="readOnly" :customerId="customerId" :sdnServersFilter="sdnServersFilter" :sdnInterfacesFilter="sdnInterfacesFilter"
    :isLoggedInAsCustomer="isLoggedInAsCustomer" :sdnInterfacesForInput="sdnInterfacesForInput" />
<VMIPBindings v-if="currentTab == 5" :readOnly="readOnly" :customerId="customerId" :isLoggedInAsCustomer="isLoggedInAsCustomer"
    :sdnServersFilter="sdnServersFilter" :vpsServersFilter="vpsServersFilter" />
<NAT v-if="currentTab == 6" :readOnly="readOnly" :customerId="customerId" :isLoggedInAsCustomer="isLoggedInAsCustomer" :sdnServersFilter="sdnServersFilter" />
`
        }).mount('#app');

    </script>

    <div id="app">
    </div>

</asp:Content>

