<template>
  <div>
    <md-toolbar class="md-transparent" md-elevation="0">
      <span class="md-title">VideON</span>
    </md-toolbar>

    <md-list>


      <md-subheader>You</md-subheader>

      <md-list-item>
        <md-avatar class="md-avatar-icon">{{ avatarText }}</md-avatar>
        <span class="md-list-item-text">{{ $store.state.auth.name }}</span>
      </md-list-item>

      <md-list-item>
        <md-button class="md-raised md-accent" @click="performLogout">Logout</md-button>
      </md-list-item>


      <md-subheader>Pending tasks</md-subheader>

      <md-list-item>

        <table>
          <tr><th>Creations:</th><td>0</td></tr>
          <tr><th>Updates:</th><td>0</td></tr>
          <tr><th>Deletions:</th><td>0</td></tr>
        </table>
      </md-list-item>

    </md-list>

  </div>
</template>

<script>
export default {
  name: "WorkspaceDrawerContent",
  props: {
    pendingChanges: {
      type: Object,
      default() {
        return {
          created: [],
          updated: [],
          deleted: []
        }
      }
    }
  },
  methods: {
    performLogout() {
      this.$store.dispatch("auth/performLogout").then(() => {
        this.$router.push({name: "Welcome"})
      })
    }
  },
  computed: {
    avatarText() {
      return this.$store.state.auth.name.slice(0, 2);
    }
  }
}
</script>

<style scoped>

</style>