Vue.component('MsgCard', {
    template: `<div class="om-card card">
                <h6 class="msg-head">
                <b>{{ msg.subject }}</b>
                <div id="msgid">{{msg._id}}</div>
                <img src="favicon.ico" width=20px height=20px>
                </h6>
                {{ msg.message }}<br>
                <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
				<br>
				</p>
                <div class="om-card-footer"> <div class="om-user-line">
                <i class="material-icons">account_circle</i>
                Erstellt von {{ msg.user }}</div>
                <i class="material-icons" @click="myFilter(msg._id)" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter(msg._id)" v-else="isActive">bookmark</i>
                </div></div>`,
    props: ['msg'],

    data: function () {
        return {
            isActive: false,
        };
    },

    methods: {
        myFilter: function(_messageid) {
            //var _messageid = $("#msgid").text();

            var _bookmark = auth.bookmarks;
            _bookmark.push(_messageid);
            console.log("msgid"+_bookmark);
            var _userid = "5d360f06b8f3ce67d12ccc92";
            this.isActive = !this.isActive;
            if(this.isActive){
                $.ajax({
                    url: "api/usr",
                    data: {
                        userid: _userid,
                        bookmark: _bookmark
                    },
                    method: "PUT"
                }).done(have_result).fail(have_error);

                function have_result(res) {
                    console.log(res);
                }

                function have_error(err) {
                    console.log("error: " + err.responseText);
                    console.log(err);
                }
            }
        },
        filterForTag: function(tag) {
            console.log("link: " +tag);
            searching(tag);
        },
    }
});