<template>
    <v-container fluid>
        <div class="Tile Shadowed Padd-0 WM-Margin-B-10" >
            <wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
        </div>

        <div class="Tile Shadowed">
            <WM-PartTitle class="WM-Margin-T-20" TitleFa=" مشتریان من " TitleEn=" My Clients " Color="red"></WM-PartTitle>
            <wm-client-filter></wm-client-filter>
            <wm-client-items></wm-client-items>
            <router-link to="AddClient">
                <v-btn large fab color="cyan" fixed bottom left dark style="left:5%"><v-icon dark>fas fa-plus</v-icon></v-btn>
            </router-link>

        </div>
        <!-- --------------------------------------------------------------------
                                    Modals :: BEGIN
        -------------------------------------------------------------------- -->
        <template>
            <div class="text-xs-center">
                <wm-client-details></wm-client-details>
                <wm-client-status></wm-client-status>
                <wm-send-email></wm-send-email>
                <wm-send-sms></wm-send-sms>
                <wm-task-add></wm-task-add>
                <wm-task-timeline></wm-task-timeline>
                <wm-event-add></wm-event-add>
                <wm-event-timeline></wm-event-timeline>
                <wm-transaction-add></wm-transaction-add>
                <wm-transaction-timeline></wm-transaction-timeline>
                <wm-comments-timeline></wm-comments-timeline>
            </div>
        </template>
        <!-- --------------------------------------------------------------------
                                    Modals :: END
        -------------------------------------------------------------------- -->
    </v-container>
</template>



<script>
import ClientItems from '@CRM/components/Clients/Items';
import ClientFilters from '@CRM/components/Clients/Filters';
import ClientDetails from "@CRM/components/Clients/Details.vue";
import ClientStatus from "@CRM/components/Clients/Status.vue";

import SendEmailModal from "@Common/components/Contact/Email/Send.vue";
import SendSMSModal from "@Common/components/Contact/SMS/Send.vue";

import TaskAdd from "@Common/components/Task/Add.vue";
import TaskTimeline from "@Common/components/Task/Timeline/Modal-Layout.vue";
import TaskTimelineItem from "@Common/components/Task/Timeline/Item.vue";

import EventAdd from "@Common/components/Event/Add.vue";
import EventTimeline from "@Common/components/Event/Timeline/Modal-Layout.vue";
import EventTimelineItem from "@Common/components/Event/Timeline/Item.vue";

import TransactionAdd from "@Common/components/Transaction/Add.vue";
import TransactionTimeline from "@Common/components/Transaction/Timeline/Modal-Layout.vue";

import CommentsTimeline from "@Common/components/Comment/Modal-Layout.vue";


export default {
    components: {
        'wm-client-items'           :       ClientItems,
        'wm-client-filter'          :       ClientFilters,
        'wm-client-details'         :       ClientDetails,
        'wm-client-status'          :       ClientStatus,
        'wm-send-email'             :       SendEmailModal,
        'wm-send-sms'               :       SendSMSModal,
        'wm-task-add'               :       TaskAdd,
        'wm-task-timeline'          :       TaskTimeline,
        'wm-event-add'              :       EventAdd,
        'wm-event-timeline'         :       EventTimeline,
        'wm-transaction-add'        :       TransactionAdd,
        'wm-transaction-timeline'   :       TransactionTimeline,
        'wm-comments-timeline'      :       CommentsTimeline,
    },
    data: function () {
        return {
            breadcrumbItems: [
                {
                    text: '',
                    disabled: false,
                    href: 'Home',
                    icon: 'home'
                },
                {
                    text: ' مشتریان من ',
                    disabled: true,
                    href: 'Clients'
                },
            ]
        }
    }
};
</script>

<style scoped lang="scss">
</style>
