<template>
  <v-app>

    <v-navigation-drawer
      app
      clipped
      fixed
      v-model="drawer">

      <v-list class="main-navigation-drawer">
        <template for v-for="(item, idx) of sidebarItems">

          <v-layout :key="idx" row>
            <v-flex xs12>

                <v-list-tile :to="item.route">
                  <v-list-tile-action>
                    <v-icon>{{ item.icon }}</v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{ item.text }}
                    </v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>

            </v-flex>

          </v-layout>

        </template>
      </v-list>

    </v-navigation-drawer>


    <v-toolbar
      color="orange darken-3"
      dark
      app
      clipped-left
      fixed>

      <v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <span class="hidden-xs-only">VBS ERP</span>
      </v-toolbar-title>

      <div class="d-flex align-center" style="margin-left: auto">
        <v-btn icon>
          <v-icon>apps</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>notifications</v-icon>
        </v-btn>


        <v-menu
          transition="scale-transition"
          origin="top right"
          offset-y
          min-width="280px">
          <v-btn icon large slot="activator">
            <v-icon>person</v-icon>
          </v-btn>
          <v-form action="/logout" method="post" class="white">
            <input type="hidden" name="_token" v-bind:value="csrfToken">

            <v-container grid-list-md>
              <v-layout row justify-space-between>
                <v-flex><strong>{{ userDetails.name }}</strong></v-flex>
              </v-layout>
              <v-layout row justify-space-between>
                <v-flex>{{ userDetails.email }}</v-flex>
              </v-layout>
            </v-container>

            <v-btn type="submit" block>
              <v-layout row justify-space-between>
                <span>Sair</span>
                <v-icon>exit_to_app</v-icon>
              </v-layout>
            </v-btn>
            <v-btn type="button" to="/account-settings" block>
              <v-layout row justify-space-between>
                <span>Configurações de Usuário</span>
                <v-icon>settings</v-icon>
              </v-layout>
            </v-btn>
          </v-form>
        </v-menu>


      </div>

    </v-toolbar>


    <v-content>

      <v-container>


        <router-view></router-view>

      </v-container>

    </v-content>


    <v-footer app class="app-footer pa-3">
      <div class="text-xs-center d-block developer">
        Desenvolvido por
        <img
          class="squares-vbsmidia"
          src="dist/imgs/vbsmidia-squares-small-orange.png"
          alt="logo vbsmídia small">
        VBS Mídia
        - &copy; {{ new Date().getFullYear() }}
        </div>
    </v-footer>

    <!--
      Shows/hides according to instructions sent through the bus from other components.
    -->
    <v-dialog v-model="sysmsg.display" max-width="500px">
      <v-card>
        <v-card-title>
          <span v-html="sysmsg.message"></span>
        </v-card-title>
        <v-card-actions>
          <v-btn color="primary" flat @click.stop="sysmsg.display = false">Fechar</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  </v-app>

</template>