<script>

export default {
  data() {
    return {
      username: null,
      password: null
    }
  },
  mounted() {},
}
</script>

<template>
<VCard flat>
  <VToolbar
    color="primary"
    dark
    extended
    flat
  >
    <VToolbarSideIcon></VToolbarSideIcon>
  </VToolbar>

  <VLayout row pb-2>
    <VFlex xs8 offset-xs2>
      <VCard :class="$style['card--flex-toolbar']">
        <VToolbar card prominent>
          <VToolbarTitle class="body-2 grey--text">Title</VToolbarTitle>

          <VSpacer></VSpacer>

          <VBtn icon>
            <VIcon>search</VIcon>
          </VBtn>

          <VBtn icon>
            <VIcon>apps</VIcon>
          </VBtn>

          <VBtn icon>
            <VIcon>more_vert</VIcon>
          </VBtn>
        </VToolbar>

        <VDivider></VDivider>

        <VCardText style="height: 200px;">
          <slot />
        </VCardText>
      </VCard>
    </VFlex>
  </VLayout>
</VCard>
</template>

<style lang="scss" module>
.card--flex-toolbar {
  margin-top: -64px;
}

</style>