<template>
  <div class="column is-one-third-desktop">
    <div id="sidebar" class="card">
      <header id="sidebar-heading" class="card-header">
       <a id="change_player" class="card-header-icon is-dark">
        <span class="icon is-small">
         <i class="fas fa-exchange-alt"></i>
        </span>
       </a>
       <p id="active_player" class="card-header-title">{{ name }}</p>
      </header>
      <div class="card-content">
        <span class="icon is-large">
          <i class="fas fa-2x fa-coins"></i>
        </span>
        <nav class="level is-mobile">
          <div class="level-item">
            <div><p class="heading">CP</p><p class="subtitle">{{ wealth[0] }}</p></div>
          </div>
          <div class="level-item">
            <div><p class="heading">SP</p><p class="subtitle">{{ wealth[1] }}</p></div>
          </div>
          <div class="level-item">
            <div><p class="heading">GP</p><p class="subtitle">{{ wealth[2] }}</p></div>
          </div>
          <div class="level-item">
            <div><p class="heading">PP</p><p class="subtitle">{{ wealth[3] }}</p></div>
          </div>
        </nav>
      </div>
      <footer class="card-footer">
        <a @click="showChest = !showChest" href="#" class="card-footer-item is-dark">Coffre</a>
        <a href="#" class="card-footer-item">Argent</a>
      </footer>
    </div>
    <div class="card" v-show="showChest" style="margin-top: 1em;">
      <div class="card-content">
        <Chest player_id="0"></Chest>
      </div>
    </div>
  </div>
</template>

<script>
    import Chest from './Chest.vue'
    /*

    The Player control board.
    
    

    */
    export default {
        components: { Chest },
        data () {
            return {
                name: "Player name",
                wealth: [1000,100,10,1],
                showChest: false,
            };
        }
    }
</script>

<style scoped>
</style>
