<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
    import {LayoutNavigationDefaultId} from "~/config/layout";
    import UserCoverContainer from "@/components/user/UserCoverContainer";
    import UserAvatarContainer from "@/components/user/UserAvatarContainer";

    export default {
        components: {UserAvatarContainer, UserCoverContainer},
        meta: {
            navigationId: LayoutNavigationDefaultId
        },
        data () {
            return {
                tabs: [
                    { name: 'Account', routeName: 'settings-id', icon: 'fas fa-bars', urlSuffix: '' },
                    { name: 'Informationen', routeName: 'settings-informations', icon: 'fa fa-info', urlSuffix: '/informations'},
                    { name: 'Sicherheit', routeName: 'settings-id-security', icon: 'fas fa-user-lock', urlSuffix: '/security' },
                    { name: 'Privatsphäre', routeName: 'settings-id-privacy', icon: 'fa fa-user-secret', urlSuffix: '/privacy' },
                    { name: 'Benachrichtigungen', routeName: 'settings-id-notifications', icon: 'fa fa-bell', urlSuffix: '/notifications'}
                ]
            }
        },
        computed: {
            user() {
                return this.$store.getters['auth/user'];
            }
        }
    }
</script>
<template>
    <div class="container">
        <div class="m-b-10">
            <h4 class="title">
                Einstellungen
            </h4>
        </div>

        <div class="mb-3">
            <user-cover-container :user="user">
                <template #header-container="{toggleEdit}">
                    <user-avatar-container :user="user" @editing="toggleEdit" />
                </template>
            </user-cover-container>
        </div>

        <div class="m-b-20 m-t-10">
            <div class="panel-card">
                <div class="panel-card-body">
                    <b-nav pills>
                        <b-nav-item
                            v-for="(item,key) in tabs"
                            :key="key"
                            :disabled="item.active"
                            :to="'/settings' + item.urlSuffix"
                            exact
                            exact-active-class="active"
                        >
                            <i :class="item.icon" />
                            {{ item.name }}
                        </b-nav-item>
                    </b-nav>
                </div>
            </div>
        </div>
        <nuxt-child />
    </div>
</template>
