<template>

    <div class="comment">

        {{ comment }}

        <div class="comment-footer">

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

            <span class="comment-date">{{ dateFormatted }}</span>

        </div>

    </div>

</template>

<script>

    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;

            }

        }

    }

</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>