<template>
    <div class="comment">
        <div class="comment-body" v-html="commentFormatted"></div>
        <div class="comment-footer">
            <span class="comment-author">{{ username }}</span>
            <span class="comment-date">{{ dateFormatted }}</span>
        </div>
    </div>
</template>

<script>

    import showdown from 'showdown'

    const converter = new showdown.Converter()

    export default {
        props: [
            'comment',
            'username',
            'email',
            'date'
        ],
        computed: {
            dateFormatted: function () {

                var date = new Date(this.date);

                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getFullYear();

                return day + '/' + month + '/' + year;
            },
            commentFormatted: function(){
              return converter.makeHtml(this.comment);
            }
        }
    }

</script>

<style scoped>
.comment {
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}
.comment-footer {
    margin-top: 5px;
    color: #ccc;
}
.comment-date {
    float: right;
}
</style>