<template>
    <div class="container_fluid">
        <WM-PageTitle TitleFa=" مدیریت وبسایت " TitleEn=" Website Management " Color="green darken-3" TitleFaClass="WM-Color-Black"></WM-PageTitle>

        <!-- <v-tabs centered slot="extension" v-model="tabs" fixed-tabs color="transparent">
            <v-tabs-slider></v-tabs-slider>
            <v-tab href="#mobile-tabs-5-1" class="primary--text">
                باشگاه مشتریان <br> Member's Club
            </v-tab>

            <v-tab href="#mobile-tabs-5-2" class="primary--text">
                باشگاه مشتریان <br> Member's Club
            </v-tab>

            <v-tab href="#mobile-tabs-5-3" class="primary--text">
                باشگاه مشتریان <br> Member's Club
            </v-tab>
        </v-tabs>
        <v-tabs-items v-model="tabs" class="white elevation-1">
            <v-tab-item v-for="i in 3" :value="'mobile-tabs-5-' + i" :key="i">
                <v-card>
                    <v-card-text>{{ text }}</v-card-text>
                </v-card>
            </v-tab-item>
        </v-tabs-items>
 -->
        <!-- Nav tabs -->
        <ul class="nav nav-tabs WM-Margin-T-20" id="WMTabs">
            <template v-for="(Tab, index) in Tabs">
                <component :is="Tab.Type" :TitleFa="Tab.NameFa" :TitleEn="Tab.NameEn" :Status="Tab.Status" :SubItems="Tab.SubItems" :TabContent="index" Color="Green"></component>
            </template>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane container-fluid active" id="MembersClub">
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" باشگاه مشتریان " TitleEn=" Members Club " Color="green darken-3"></WM-PartTitle>
                <UserFilters class="WM-Margin-T-20"></UserFilters>
                <hr>
                <Users></Users>
            </div>
            <div class="tab-pane container fade" id="SpecialForms">...</div>
            <div class="tab-pane container fade" id="Reservation">...</div>
        </div>

        <template>
            <div class="text-xs-center ">
                <UserDetailsModal></UserDetailsModal>
                <UserRolesModal></UserRolesModal>
                <SendEmailModal></SendEmailModal>
                <SendSMSModal></SendSMSModal>
            </div>
        </template>



    </div>


</template>



<script>

import TabItem from '@Global/components/Misc/TabItem.vue';
import TabDropdownItem from '@Global/components/Misc/TabDropdownItem.vue';

import Users from "@User/components/User/Items.vue";
import UserFilters from "@User/components/User/Filters.vue";
import UserDetailsModal from "@User/components/User/Modal-Details.vue";
import UserRolesModal from "@User/components/User/Modal-Roles.vue";

import SendEmailModal from "@User/components/Contact/Modal-SendEmail.vue";
import SendSMSModal from "@User/components/Contact/Modal-SendSMS.vue";


export default {
    components: {
        TabItem,
        TabDropdownItem,
        Users,
        UserFilters,
        UserDetailsModal,
        UserRolesModal,
        SendEmailModal,
        SendSMSModal
    },
    data: function ()  {
        return {
            tabs: null,
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
            date: new Date().toISOString().substr(0, 10),
            DateFilterAfter: false,
            DateFilterBefore: false,
            Tabs: {
                MembersClub: {
                    Type: 'TabItem',
                    NameFa: ' باشگاه مشتریان ',
                    NameEn: 'Members Club',
                    Status: 'Active',
                },
                SpecialForms: {
                    Type: 'TabDropdownItem',
                    NameFa: ' فرم های خاص من ',
                    NameEn: 'My Special Forms',
                    SubItems: {
                        Item1: { NameFa: ' فرم تماس با ما ', NameEn: 'Contact Us' },
                        Item2: { NameFa: ' فرم پیش ثبت نام من ', NameEn: 'My Pre SignUp Form' }
                    }
                },
                Reservation: {
                    Type: 'TabItem',
                    NameFa: ' رزرو وقت ',
                    NameEn: 'Reservation',
                },
            },


            Users: {
                1: { Name: ' علیرضا حسنی ', Email: 'Alireza-Hassani@outlook.com', CellNumber: '09127004945' },
                4: { Name: ' فرید ساروی ', CellNumber: '09127476990' },
                27:{ Name: ' سعید خاکبازان ', CellNumber: '09336541236' },
            },
        }
    }
};


</script>
