<template>
  <v-card>
    <v-toolbar color="primary" dark extended dense>
      <v-toolbar-title>Hey Michael, How are you?</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon color="white">close</v-icon>
      </v-btn>
      <div slot="extension" class="layout row align-center white grey--text px-2">
        <v-avatar size="32">
          <img src="https://randomuser.me/api/portraits/men/92.jpg" >
        </v-avatar>  
        <div class="subheading pa-1">John Doe</div> 
        <v-btn icon>
          <v-icon color="grey">keyboard_arrow_down</v-icon>
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon color="yellow">star</v-icon>
        </v-btn>        
        <div class="subheading">09:30</div>
        <v-btn icon>
          <v-icon color="grey">reply</v-icon>
        </v-btn>          
        <v-btn icon>
          <v-icon color="grey">reply_all</v-icon>
        </v-btn>          
        <v-btn icon>
          <v-icon color="grey">delete</v-icon>
        </v-btn>          
        <v-btn icon>
          <v-icon color="grey">expand_more</v-icon>
        </v-btn>          
      </div>
    </v-toolbar>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    toggle_exclusive: 2,
    title: 'Hi,\nI just wanted to check in and see if you had any plans the upcoming weekend. We are thinking of heading up to Napa', 
    
  })
};
</script>
