<template>
  <div class="page-container md-layout-column" id="dashboard-container">
    <md-toolbar class="md-primary">

      <md-button class="md-icon-button" @click="showNavigation = true">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">VideON</span>

      <div class="md-toolbar-section-end">
        <md-button class="md-raised" :disabled="true">Apply</md-button>
      </div>

    </md-toolbar>

    <md-drawer :md-active.sync="showNavigation" md-swipeable>
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">VideON</span>


      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-avatar class="md-avatar-icon">J</md-avatar>
          <span class="md-list-item-text">Joska</span>
        </md-list-item>

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

      </md-list>

    </md-drawer>

    <md-content id="diagram-container">
      <md-progress-bar v-if="true" class="md-accent" md-mode="indeterminate"></md-progress-bar>

      <div id="fab-holder">
        <md-button class="md-fab">
          <md-icon>add</md-icon>
        </md-button>
      </div>

    </md-content>

  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  components: {},
  data: () => ({
    showNavigation: false
  })

}
</script>

<style scoped>
#dashboard-container {
  height: 100%;
}

#diagram-container {
  height: calc(100% - 64px);
}

#fab-holder {
  position: absolute;
  z-index: 5;
  right: 2rem;
  bottom: 2rem;
}
</style>