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

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

    <script type="module">

        import { createApp } from 'vue'
        import SealedImages from '/Components/VPS/SealedImages.js?v=3.4'
        import QuotaSettings from '/Components/VPS/QuotaSettings.js?v=3.4'
        import OSLicenses from '/Components/VPS/OSLicenses.js?v=3.4'
        import ISOs from '/Components/VPS/ISOs.js?v=3.4'
        import StorageTypes from '/Components/VPS/StorageTypes.js?v=3.4'
        import VNICBandwidthTiers from '/Components/VPS/VNICBandwidthTiers.js?v=3.4'
        import RDPCustomPorts from '/Components/VPS/RDPCustomPorts.js?v=3.4'
        import GuardedFabric from '/Components/VPS/GuardedFabric.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 %>,
                    isLoggedInAsCustomer: <%= Helper.IsLoggedInAsCustomer.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    currentTab: 0,
                    tabPanels: [{ text: this.getLabelText('HyperV06'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('String359'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('strOsLicenses'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('ISOs'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('strStorageTypes'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('strBandWidthTiers'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('strRDPCustomPorts'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('GuardedFabric'), enabled: true, hideTabs: [] }]
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            components: {
                TabContainer,
                SealedImages,
                QuotaSettings,
                OSLicenses,
                ISOs,
                StorageTypes,
                VNICBandwidthTiers,
                RDPCustomPorts,
                GuardedFabric
            },
            template: `
<TabContainer :id="'vpssetup'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

<SealedImages v-if="currentTab == 0" :readOnly="readOnly" />
<QuotaSettings v-if="currentTab == 1" :readOnly="readOnly" />
<OSLicenses v-if="currentTab == 2" :readOnly="readOnly" />
<ISOs v-if="currentTab == 3" :readOnly="readOnly" />
<StorageTypes v-if="currentTab == 4" :readOnly="readOnly" />
<VNICBandwidthTiers v-if="currentTab == 5" :readOnly="readOnly" />
<RDPCustomPorts v-if="currentTab == 6" :readOnly="readOnly" />
<GuardedFabric v-if="currentTab == 7" :readOnly="readOnly" />

`
        }).mount('#app')

    </script>

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

</asp:Content>