<template>
  <nav class="navbar is-info">
    <div class="navbar-brand">
      <p class="navbar-item is-size-4"><slot name="title">...</slot></p>
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
	  <span aria-hidden="true"></span>
	  <span aria-hidden="true"></span>
	  <span aria-hidden="true"></span>
	</a>
    </div>
    <div id="menu" class="navbar-menu">
      <div class="navbar-start" v-if="!playerIsGroup">
     	  <a class="navbar-item" @click="switchPlayerChestVisibility">
     	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
      </div>
      <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Autres</a>
        <div class="navbar-dropdown is-right">
          <a class="navbar-item">History of Loot</a>
          <template v-if="playerIsGroup">
            <hr class="navbar-divider">
            <div class="navbar-item heading">Admin</div>
            <a class="navbar-item">"Resolve claims"</a>
            <a class="navbar-item">"Add player"</a>
          </template>
          <hr class="navbar-divider">
          <div class="navbar-item heading">Changer</div>
          <a v-for="(p,i) in app_state.player_list" :key="i"
           @click="setActivePlayer(i)"
           href="#" class="navbar-item">
           {{ p.name }}</a>
	</div>
      </div>
      </div>
    </div>
  </nav>
</template>

<script>
    import { AppStorage } from '../AppStorage'
    export default {
        props: ["app_state"],
        methods: {
          setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
          switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
         },
        computed: {
          playerIsGroup () { return this.app_state.player_id == 0 },
        }
    }
</script>
