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

<asp:Content ID="Content5" ContentPlaceHolderID="CPH_Content" runat="Server">
    <script type="module">

        import { createApp } from 'vue'
        import GroupActions from '/Components/Network/GroupActions.js?v=3.4' 
        import O365GroupActions from '/Components/Network/O365GroupActions.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() %>,
                    customerId: '<%= CustomerIdFilter %>',
                    companyId: '<%= Session("CompanyId") %>',
                    organizationNameFilter: '<%= OrganizationNameFilter %>',
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    sortPreferenceCSP: <%= Newtonsoft.Json.JsonConvert.SerializeObject(CSPInitialSortPreference) %>,
                    isSubReseller: <%= Helper.IsSubReseller.ToString().ToLower() %>,
                    runGroupJob: <%= AllowToRunGroupJobs.ToString().ToLower() %>,
                    allowToManageGroupJobs: <%= AllowToManageGroupJobs.ToString().ToLower() %>,
                    isOffice365Enabled: <%= IsOffice365Enabled.ToString().ToLower() %>,
                    allowToManageO365GroupJobs: <%=  AllowToManageO365GroupJobs.ToString().ToLower()  %>,
                    allowToRunO365GroupJob: <%=  AllowToRunO365GroupJob.ToString().ToLower()  %>,
                    allowToCancelO365GroupJob: <%=  AllowToCancelO365GroupJob.ToString().ToLower() %>,
                    orgCompanyIdFilter: '<%= CompanyIdFilter %>',                    
                    packageTypeId: '-1',
                    currentTab: 0,
                    tabPanels: []
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                }
            },
            components: {             
                GroupActions,
                O365GroupActions,
                TabContainer
            },                 
            created: function () {
                var vm = this;

                this.tabPanels = [{ text: this.getLabelText('strGroupActionsLog'), enabled: vm.allowToManageGroupJobs, hideTabs: [] },
                    { text: this.getLabelText('strCSPGroupActionsLog'), enabled: (vm.isOffice365Enabled && vm.allowToManageO365GroupJobs), hideTabs: [] }];

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

                if (urlParams.has('tindex')) {
                    this.activeTabChanged(urlParams.get('tindex'));
                }
            },              
            template: `
<TabContainer :id="'groupjobs'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

<GroupActions v-if="currentTab == 0" :sortPreference="sortPreference" :readOnly="readOnly" :isSubReseller="isSubReseller" :organizationNameFilter="organizationNameFilter"
    :isLoggedInAsCustomer="isLoggedInAsCustomer" :isLoggedInAsReseller="isLoggedInAsReseller" :customerId="customerId" :packageTypeId="packageTypeId"
    :companyId="companyId" :runGroupJob="runGroupJob" :orgCompanyIdFilter="orgCompanyIdFilter" />

<O365GroupActions v-if="currentTab == 1" :sortPreference="sortPreferenceCSP" :readOnly="readOnly" :isSubReseller="isSubReseller"
    :isLoggedInAsCustomer="isLoggedInAsCustomer" :isLoggedInAsReseller="isLoggedInAsReseller" :customerId="customerId" :packageTypeId="packageTypeId"
    :companyId="companyId" :runGroupJob="runGroupJob" :allowToManageO365GroupJobs="allowToManageO365GroupJobs"
    :allowToRunO365GroupJob="allowToRunO365GroupJob" :allowToCancelO365GroupJob="allowToCancelO365GroupJob"/>

                 
`
        }).mount('#app')

    </script>

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