<template>
  <div>
    <h4 class="ui horizontal divider header">
        PROFIL
      </h4>
      <div class="ui divided list">
      <div class="item">
        <div class="right floated content">
          <div class="description">
            <span v-if="user.username">{{ user.username }} </span>
          </div>
        </div>
        <div class="content">
          Nom d'utilisateur
        </div>
      </div>
      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ userFullname }}
          </div>
        </div>
        <div class="content">
          Nom complet
        </div>
      </div>
      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ user.email }}
          </div>
        </div>
        <div class="content">
          Adresse e-mail
        </div>
      </div>
      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ user.is_superuser ? "Oui" : "Non" }}
          </div>
        </div>
        <div class="content">
          Administrateur
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  
  name: 'UserProfile',

  computed: {
    ...mapState([
      'user'
    ]),

    userFullname() {
      if (this.user.first_name || this.user.last_name)
        return this.user.first_name + ' ' + this.user.last_name;
      return null;
    },
  }

};
</script>

<style lang="less" scoped>

</style>