<template>
    <v-timeline class="LTR">
        <v-timeline-item v-for="(event, key) in events" :key="key" :color="(event.user_id==12) ? 'red' : 'cyan'"
                         :class="(event.user_id==12) ? 'Red Right' : 'Cyan Left'" small fill-dot>
        <template v-slot:opposite>
            <span> {{ event.user_name }} </span>
            <div class="Time"><v-icon>fas fa-clock-alt</v-icon> {{ event.date }} </div>
        </template>
        <v-card class="elevation-3 RTL" >
            <v-card-title> {{ event.title }} </v-card-title>
            <v-card-text class="text-lg-right Desc">
            {{ event.desc }}
            </v-card-text>
        </v-card>
        </v-timeline-item>
    </v-timeline>
</template>


<script>

export default {
    props: {
        events:     { default: [] },
    },
    data () {
        return {
        }
    }

};
</script>
<style lang="scss">
    // .v-timeline-item--left .v-timeline-item__opposite, .v-timeline-item:nth-child(odd):not(.v-timeline-item--right) .v-timeline-item__opposite {
    //     margin-right: 96px;
    //     text-align: right;
    // }
    .v-card__title {
        padding-bottom: 5px;
        font-size: 22px;
    }
    .v-timeline .Desc {
        padding-top: 5px;
    }
     .v-timeline .Time {
        color: #9e9e9e;
        font-size: 16px;
    }

    .v-timeline-item .v-card:after, .v-timeline-item .v-card:before {
        border-bottom: 0px;
        border-right: 0px;
    }

    .v-timeline-item.Right {
        flex-direction: row !important;
    }
    .v-timeline-item.Left {
        flex-direction: row-reverse !important;
    }
    .v-timeline-item.Left .v-timeline-item__opposite {
        margin-right: 96px;
        text-align: right !important;
    }
    .v-timeline-item.Right .v-timeline-item__opposite {
        margin-left: 96px;
        text-align: left !important;
    }



    .v-timeline-item.Right .v-card {
        border-right: 4px solid;
    }
    .v-timeline-item.Left .v-card {
        border-left: 4px solid;
    }
    .v-timeline-item.Red .v-card {
        box-shadow: none !important;
        border-color: #ee3552;
        background-color: rgba(238, 53, 82, 0.05);
    }
    .v-timeline-item.Cyan .v-card {
        box-shadow: none !important;
        background-color: rgba(50, 197, 210, 0.05);
        border-color: #32c5d2;
    }
</style>

