<template>

        <div class="comment-body">

            <strong class="comment-author">{{ username }}</strong>

            <div class="comment-content" v-html="commentFormatted"></div>

        </div>

        <div class="comment-footer">

        </div>

    </div>

</template>

<script>

    import showdown from 'showdown'

    const converter = new showdown.Converter({

        simpleLineBreaks: true

    })

    export default {

        components: ['comment-form'],

        props: [

            'id',

            'level',

            'comment',

            'username',

            'email',

            'date',

            'allowThread'

        ],

        data() {

            return {

            }

        },

        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-author {

    float: left;

    margin-right: 4px;

}

.comment-date {

}

.comment-footer {

    margin-top: 5px;

    color: #ccc;

}

</style>