<template>
  <md-tab id="profileView" :md-icon="require('@/assets/profile-user.svg')">
    <div class="md-layout md-alignment-bottom-center">
      <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)" :hide_if_small="true"/>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored" >
        <h3 style="text-align: center; margin: 4% 0%">Профиль</h3>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-50 md-small-size-100 md-alignment-bottom-center rounded-only">
        <br>
        <hr width="50%">
        <div v-if="this.$API.player.auth('steam') === false" class="clickable">
          <h2 class="auth-button" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h2>
        </div>
        <div v-else>
          <ProfileContainer :player="$API.player.store"/>
          <h5 class="auth-button" v-on:click="logout()">Выйти</h5>
        </div>
      </div>
    </div>
    <AuthWindow ref="aw"/>
  </md-tab>
</template>

<script>
import CharacterImage from "@/components/Others/CharacterImage.vue";
import AuthWindow from "@/components/Others/AuthWindow.vue";
import ProfileContainer from "@/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue";
export default {
  name: 'ProfileView',
  props: {
    avatar: {
      type: String
    }
  },
  components: {ProfileContainer, AuthWindow, CharacterImage},
  methods: {
    openAW() {
      console.log('open auth window');
      this.$refs.aw.showAuthDialog = true;
    },
    logout() {
      this.$refs.aw.moveTo("logout", "steam");
    }
  }
}
</script>

<style>
.auth-button {
  text-align: center
}

.auth-button:hover {
  text-decoration-line: underline;
  cursor: pointer;
}
</style>