<template>
  <header>
      <nuxt-link to="/" class="title">
        <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0 7.07348C0 6.81265 0.101912 6.56214 0.284 6.37538L5.784 0.73436C6.17647 0.331827 6.82353 0.331826 7.216 0.734359L12.716 6.37538C12.8981 6.56214 13 6.81265 13 7.07348V15C13 15.5523 12.5523 16 12 16H1C0.447715 16 0 15.5523 0 15V7.07348Z"
            fill="#8BCDCD"/>
          </svg>
        Boussolle <span class="bold">PLUSS</span>
      </nuxt-link>
      <span class="team">
        Équipe : {{ team }}
      </span>
  </header>
</template>

<script lang="ts">
import {Component, Vue} from "nuxt-property-decorator";

@Component
export default class TeamHeader extends Vue {

  get team() {
    return this.$auth.user ? this.$auth.user.username : "Non connecté";
  }
}
</script>


<style lang="scss" scoped>
  @import "assets/css/color";
  @import "assets/css/spacing";
  @import "assets/css/font";

  header {
    margin-top: $xx_small;
    color: $black;
    display: flex;
    justify-content: space-between;
  }

  .title {
    text-transform: uppercase;
    color: $black;
    text-decoration: none;
  }

  .title svg {
    margin-right: $xxx_small;
  }

  .team {
    font-size: $small-font-size;
  }

</style>
