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

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

    <!-- Include the external template so the DOM template is available before the module runs -->
    <!--#include virtual="../../Components/Exchange/ExAccounts.html" -->
    <!--#include virtual="../../Components/Exchange/ExSettings.html" -->

    <script type="module">

        import { createApp } from 'vue'
        import ExAccounts from '/Components/Exchange/ExAccounts.js?v=3.4'
        import ExSettings from '/Components/Exchange/ExSettings.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 %>,
                    currentDate: <%= Newtonsoft.Json.JsonConvert.SerializeObject(CurrentDate) %>,
                    isLoggedInAsCustomer: <%= Helper.IsLoggedInAsCustomer.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    customerId: '<%= IIF(Helper.IsLoggedInAsCustomer, Session("CustomerId"), 0) %>',
                    companyId: '<%= Session("CompanyId") %>',
                    exAccountsSortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(ExAccountsSortPreference) %>,
                    exSettingsSortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(ExSettingsSortPreference) %>,
                    syncFromBackendAllowed: <%= Helper.CustomerAccessTemplates.SyncFromBackendAllowed.ToString().ToLower() %>,
                    exchLitigationHold:  <%= Helper.CustomerAccessTemplates.ExchLitigationHold.ToString().ToLower() %>,
                    showSettingTab: <%= ShowSettingTab.ToString().ToLower() %>,
                    isSubReseller: <%= Helper.IsSubReseller.ToString().ToLower() %>,
                    currentTab: 0,
                    tabPanels: []
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            components: {
                TabContainer,
                ExAccounts,
                ExSettings
            },
            created: function () {

                this.tabPanels = [{ text: this.getLabelText('DEV10041'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText("M0027"), enabled: (!this.isLoggedInAsCustomer && !this.isSubReseller && this.showSettingTab), hideTabs: [] }];

                let urlParams = new URLSearchParams(window.location.search);
                if (urlParams.has('IA')) {
                    if (urlParams.get('IA') == 1)
                        displaySuccessMsg(this.getLabelText('SPT002054'));
                }
            },

            template: `
            <TabContainer :id="'exaccounts'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

            <ExAccounts  v-if="currentTab == 0" :sortPreference="exAccountsSortPreference" :readOnly="readOnly" :isSubReseller="isSubReseller"
                :currentDate="currentDate" :isLoggedInAsCustomer="isLoggedInAsCustomer" :isLoggedInAsReseller="isLoggedInAsReseller" :customerId="customerId"
                :companyId="companyId" :syncFromBackendAllowed="syncFromBackendAllowed" :exchLitigationHold="exchLitigationHold" />

            <ExSettings v-if="currentTab == 1 && !isLoggedInAsCustomer && showSettingTab" :sortPreference="exSettingsSortPreference" :readOnly="readOnly"
                :isSubReseller="isSubReseller" :isLoggedInAsReseller="isLoggedInAsReseller" />

`
        }).mount('#app')

    </script>

    <div id="app">
    </div>
</asp:Content>
