<template>
    <div class="popup">
        <v-row>
            <v-icon class="closeIcon" @click="closePopup" small>$close</v-icon>
            <v-col cols="12">
                <h3>{{step.label}}</h3>
            </v-col>
            <v-col v-if="step.start" cols="12" class="text-left ">
                <span v-if="step.period">
                   <b> Du {{new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'short' }).format(new Date(step.start)) }} <br/>Au {{new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'short' }).format(new Date(step.end)) }}</b>
                </span>
                <span v-else>
                    <b>Le {{new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'short' }).format(new Date(step.start)) }}</b>
                </span>
            </v-col>
            <v-col cols="12" class="text-left py-1">
                <b>Déclencheur : </b>{{step.trigger}}
            </v-col>
            <v-col cols="12" class="text-left py-1">
                <h4>Description :</h4>
                <span v-html="step.description"></span>
            </v-col>
            <v-col cols='12' v-if='step.link && step.link != ""'>
                <v-btn :href="step.link" depressed color="primary" rounded>Accéder à l'étape</v-btn>
            </v-col>
        </v-row>
    </div>
</template>

<script>
export default {
    name:"TimelinePopup",
    props:['step'],
    methods: {
        closePopup: function() {
            this.$emit('hidePopup')
        }
    },
}
</script>
<style lang="scss">
    .closeIcon {
        position:absolute !important;
        right:5px;
    }
    .popup {
        position:absolute;
        background-color:#FEFEFE;
        box-shadow: 0px 0px 5px #BBB;
        padding:20px;
        border-radius:10px;
        width:450px;
        z-index:15;
    }
</style>