Vue.component('profil-card', {
    template: `
        <div class="profil-card card">
            <img class="prof-image" src="img/profil_icon.png" alt="Card image cap">

            <div class="logout-item" style="float: right;">
                <b-button type="button" class="btn btn-primary" data-dismiss="modal" @click.prevent="logout">
                    <i class="material-icons" style="float: left; margin: -0.1rem 0.2rem 0 -0.2rem;" @click.prevent="logout">exit_to_app</i>
                Logout</b-button>
            </div>

            <div class="profil-text">
                <span style="font-size:120%; display:inline-block; margin: 0.8rem 0 0 0;"><b>{{ auth.name }}</b></span><br><br>
                <span style="font-size:90%; display:inline-block; margin: 0 0 0.8rem 0;"><b>{{ major }}</b></span>
                <br><br>
            </div>

            <hr class="first">

            <div class="btnprofil">
                <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abos }}</b> <br/></button>
                <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ bookmarks }}</b><br/></button>
            </div>

            <section>
                <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
                    <div class="card">
                        <header class="modal-card-head">
                            <p class="modal-card-title">Abonnierte Tags</p>
                        </header>
                        <div class="card-content">
                            <div class="content">
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <footer class="modal-card-foot">
                            <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
                        </footer>
                    </div>
                </b-modal>
            </section>
        </div>`,
    data: function () {
        return {
            auth: auth,
            abos: auth.abos ? auth.abos.length : '-',
            bookmarks: auth.bookmarks ? auth.bookmarks.length : '-',
            isCardModalActive: false,
        };
    },
    computed: {
        major: function() {
            // e.g. ST@B-ME;ST@EFI;
            var majorID = auth.type.split(';')[0].split('@')[1];
            //console.info(majorID);
            //console.info(majorList);
            var majorName = 'Studiengang Unbekannt';
            majorList.forEach(function(major) {
                if (major.id == majorID) {
                    majorName = major.name;
                }
            });
            return majorName;
        },
    },
    methods: {
        logout: function() {
            clearAuthState();
            $.ajax({ url: "api/logout", method: "POST" });
            vueForceRender();
            router.push('/profil');
        },
    }
});