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

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

    <style type="text/css">
        .tabButton {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 10px 10px;
            font-size: 16px;
            font-weight: 400;
            color: #999;
            border-bottom: solid 2px #cfcfcf;
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
            -moz-transition: 0.1s ease-in;
            -o-transition: 0.1s ease-in;
            -webkit-transition: 0.1s ease-in;
            transition: 0.1s ease-in;
            margin-left: 2px;
        }

            .tabButton.active {
                border-bottom: solid 2px red;
                color: #111;
                font-size: 16.5px;
            }

        .vue-multi-select {
            width: 100%;
            height: 125px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

            .vue-multi-select option {
                padding: 3px 5px;
            }

                .vue-multi-select option[selected] {
                    background-color: #cfcfcf;
                }

    </style>
    <script type="module">

        import { createApp } from 'vue'
        import ClientList from '/Components/RCC/Clients/ClientList.js'
        import ResellerList from '/Components/PCC/Reseller/ResellerList.js'
        import CulturePreview from '/Components/CulturePreview.js'
        

        createApp({
            data() {
                return {                    
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    showWHMCS: <%= Helper.ShowWHMCSColumn.ToString().ToLower() %>,
                    isSubReseller: <%= Helper.IsSubReseller.ToString().Tolower() %>,
                    showCustomerNumber: <%= Helper.ShowCustomerNumber.ToString().Tolower() %>,
                    showExportToExcel: <%= ShowExportToExcel.ToString().ToLower() %>,
                    
                    showImportResellers: <%= ShowImportResellers %>,
                    showOperations: <%= ShowOperations %>,
                    showDeleteOption: <%= ShowDeleteOption %>,
                    isKeyCloakEnabled: <%= MachSol.MachPanel.DBCore.KeyCloak.LoggedInKeyCloak.ToString().ToLower() %>,
                    subscriptionBasedReseller: <%= SubscriptionBasedReseller %>,
                    isComissionbasedResellerEnabled: <%= IsComissionbasedResellerEnabled %>,
                    isSubscriptionbasedResellerEnabled: <%= IsSubscriptionbasedResellerEnabled %>,
                    currentTab: 0
                }
            },
            methods: {
                getString: function (key) {
                    return Translation[key];
                }
            },
            components: {
                ClientList,
                ResellerList,
                CulturePreview
            },            
            template: `<div class='col-xs-12'>
                        <button class="panel-group search-panel" @click.prevent="currentTab = 0;" class="tabButton" :class="{active:(currentTab == 0)}">{{getString("SM200002")}}</button>
                        <button @click.prevent="currentTab = 1;" class="tabButton" :class="{active:(currentTab == 1)}">{{getString("String199")}}</button>
                        <button @click.prevent="currentTab = 2;" class="tabButton" :class="{active:(currentTab == 2)}">{{getString("DGN1110415")}}</button>
                        </div><br />
                        <ClientList tabIndex="0" v-if="currentTab == 0" :readOnly="readOnly" :showWHMCS="showWHMCS" :isSubReseller="isSubReseller" :showCustomerNumber="showCustomerNumber" :showExportToExcel="showExportToExcel" currentTab="0" />
                        <CulturePreview v-if="currentTab == 2" currentTab="2"></CulturePreview>
`
        }).mount('#app')

    </script>

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


    <%--<div id="test" runat="server">
        Current Process Id:
        <% Response.Write(System.Diagnostics.Process.GetCurrentProcess().Id)  %>
        <br />
        Session Id value in page Load: 
        <%= HttpContext.Current.Session("ProcessId")  %>
        <br />
        Session Contents Count: <%= System.Web.HttpContext.Current.Session.Contents.Count %>
        <br />
        <asp:Button ID="Btn" runat="server" Text="ClickMe" />

    </div>--%>
</asp:Content>

