<template lang="pug">
div(class="card text-white bg-dark my-4")
  h5(class="card-header bg-warning text-dark") Информация о пользователе
  div(class="card-body")
    div(v-if="!me")
      center
        button(class="btn btn-primary btn-warning" data-toggle="modal" data-target="#Auth") Аутентификация
    div(v-else)
      div(class="card  mb-4")
        a(:href="'/users/'+me._id" )
          img(:src="me.avaUrl" :alt="'User'+me._id+'_Avatar'" class="mx-auto d-block MeIcon")
      div(class="card-body")
        a(:href="'/users/'+me._id" )
          h2(class="card-title") {{me.login}}
        p(class="card-text") {{me.bio}}
        form(action="#" v-on:submit.prevent="logout")
          input(type="submit" class="btn btn-primary btn-warning" value="Выйти")
  div(class="modal  fade" id="Auth" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden= "true")
    div(class="modal-dialog  modal-dialog-centered" role="document")
      div(class="modal-content text-white bg-dark")
        div(class="modal-header bg-warning text-dark")
          center
            h5(class="modal-title" id="exampleModalLongTitle") Добро пожаловать!
        div(class="modal-body")
          form(action="#" v-on:submit.prevent="login" method="POST")
            div(class="form-group")
              h4
                label(for="UserLogin") Логин
              input(type="text" v-model="username" class="form-control" id="UserLogin" name="username"  placeholder="Введите логин" required)
            div(class="form-group")
              h4
                label(for="Password") Пароль
              input(type="password" v-model="password" class="form-control" id="Password" name="password" placeholder="Введите пароль")
            button(type="submit"  id="logInBatton" class="btn btn-primary btn-warning") Войти!
        div(class="modal-footer")
          h6 У вас всё ещё нет аккаунта? Тогда зарегистрируйтесь прямо сейчас!
          a(class="btn btn-primary btn-warning" href="/auth/auth" data-dismiss="modal" ) Регистрация
          router-link(class="btn btn-primary btn-warning" active-class="is-active" class="link" :to="{ name: 'register' }" data-dismiss="modal") Регистрация
</template>

<script>
    export default {
        name: "AuthBlock",
        mounted() {
            console.log('AuthBlock mounted!');
        },
        data() {
            return {
                username: '',
                password: ''
            }
        },
        computed: {
            me() {
                console.log('get me ', this.$store.getters.me)
                return this.$store.getters.me
            }
        },
        methods: {
            login() {
                this.$store.dispatch('retrieveToken', {
                    username: this.username,
                    password: this.password,
                })
                    .then(response => {
                        $("#Auth").modal("hide");
                        this.$router.push({name:'home'});
                    })
            },
            logout() {
                console.log('LOGOUT');
                this.$store.dispatch('destroyToken')
                    .then(response => {
                        this.$router.push({ name: 'home' });
                    })
            }
        }
    }
</script>

<style scoped>
</style>