<template>
  <div>
    <v-navigation-drawer
      fixed
      clipped
      app
      permanent
      :mini-variant="mini"
    >
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-action v-if="mini">
              <v-btn icon @click.native.stop="mini = !mini">
                <v-icon>chevron_right</v-icon>
              </v-btn>
            </v-list-tile-action>
            <v-list-tile-content class="title">
              <slot name="header"></slot>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-btn icon @click.native.stop="mini = !mini">
                <v-icon>chevron_left</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
      </v-toolbar>
        <slot name="sidebar-content"></slot>
    </v-navigation-drawer>
    <v-toolbar
      app
      clipped-left
      fixed
      dark
      color="indigo darken-4"
      class="grady-toolbar"
    >
      <v-toolbar-title>
        <v-avatar>
          <img src="../assets/brand.png">
        </v-avatar>
      </v-toolbar-title>
      <span class="pl-2 grady-speak">{{ gradySpeak }}</span>
      <div class="toolbar-content">
        <span>{{ userRole }} | {{ username }}</span>
      </div>
      <v-btn color="blue darken-1" to="/" @click.native="logout">Logout</v-btn>
    </v-toolbar>
    <v-content>
      <router-view></router-view>
    </v-content>
  </div>
</template>

<script>
  import { mapActions, mapGetters, mapState } from 'vuex'
  export default {
    name: 'base-layout',
    data () {
      return {
        mini: false
      }
    },
    computed: {
      ...mapGetters([
        'gradySpeak'
      ]),
      ...mapState([
        'username',
        'userRole'
      ])
    },
    methods: {
      ...mapActions([
        'logout'
      ])
    },
    watch: {
      mini: function () {
        this.$emit('sidebarMini', this.mini)
      }
    }
  }
</script>

<style scoped>
  .toolbar-content {
    margin-left: auto;
  }

  .grady-toolbar {
    font-weight: bold;
  }
</style>