<template>

    <div v-show="annotation">

        <label class="form-label">Commentaires</label>

        <div v-show="comments.length === 0" class="alert alert-info">Pas de commentaire pour le moment.</div>

        <comment

            v-for="comment in comments"

            v-bind:comment="comment.comment"

            v-bind:username="comment.user_name"

            v-bind:date="comment.submit_date"></comment>

    </div>

</template>

<script>

    import Comment from './Comment.vue'

    export default {

        props: ['annotation', 'fetch'],

        components: {

            Comment

        },

        data() {

            return {

                'comments': []

            }

        },

        computed: {

            commentsURL: function() {

                return this.fetch.replace(':annotation_guid', this.annotation.annotation_guid);

            }

        },

        watch: {

            annotation: function(annotation) {

                if (annotation) {

                    $.getJSON(this.commentsURL).then((comments) => this.comments = comments);

                } else {

                    this.comments = [];

                }

            }

        }

    }

</script>

<style scoped>

.alert {

    padding: 10px;

    font-size: 12px;

}

</style>