<template>

    <div v-show="annotation" class="wrapper">

        <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:id="comment.id"

            v-bind:level="comment.level"

            v-bind:comment="comment.comment"

            v-bind:username="comment.user_name"

            v-bind:date="comment.submit_date"

            v-bind:allow-thread="comment.allow_thread"

            v-bind:is-authenticated="isAuthenticated"></comment>

    </div>

</template>

<script>

    import Comment from './Comment.vue'

    export default {

        props: ['annotation', 'fetch', 'is-authenticated'],

        components: {

            Comment

        },

        data() {

            return {

                'comments': []

            }

        },

        computed: {

            commentsURL: function() {

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

            }

        },

        watch: {

            annotation: function(annotation) {

                if (annotation && annotation.annotation_guid) {

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

                } else {

                    this.comments = [];

                }

            }

        },

        mounted() {

            if (this.annotation) {

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

            }

        }

    }

</script>

<style scoped>

.wrapper {

    height: auto;

    overflow-y: auto;

    margin-bottom: 20px;

}

.alert {

    padding: 10px;

    font-size: 12px;

}

</style>