<template>
    <div class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
        <div class="comment-body">
            <strong class="comment-author">{{ username }}</strong>
            <div class="comment-content" v-html="commentFormatted"></div>
        </div>
        <div class="comment-footer">
            <a v-if="allowThread" href="#" v-on:click.prevent="showForm = !showForm">Répondre</a>
            <span class="comment-date">{{ dateFormatted }}</span>
            <comment-form v-bind:reply-to="id" v-if="allowThread" v-show="showForm">
                <button slot="submit" type="submit" class="btn btn-xs btn-primary">Valider</button>
                <a slot="submit" href="#" v-on:click.prevent="showForm = false" class="text-muted" style="margin-left: 5px;">Annuler</a>
            </comment-form>
        </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 {
                showForm: false
            }
        },
        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>