<template>
  <div class="vue-user-ribon--wrap" aria-hidden="true">
    <p>Vous êtres connecté <strong>{{username}}</strong>.</p>
    <avatar :username="this.username" :src="this.pathToImage"/>
    <button class="logout-button" v-on:click="logout">
      <img src="icons/logout.svg" height="40"/>
    </button>
    
  </div>
</template>


<script>
// @ is an alias to /src
import Avatar from '@/components/Avatar.vue'

export default {
  name: 'UserRibbon',
  props: {
    username: {
      type: String
    },
    
    pathToImage: {
      type: String
    }
  },
  components: {
    Avatar
  },
  methods: {
    logout: function() {
      this.$router.push('/')
    }
  }
}
</script>

<style>
.vue-user-ribon--wrap{
    display: flex;
}

.vue-user-ribon--wrap *{
    align-self: center;
    margin: 5px;
}
.vue-user-ribon--wrap strong{
    margin: 0;
}
p{
    
    color: white;
}
.logout-button{
  
    background: transparent;
    border: none;
}
</style>