<template>
 <v-app id="login">

    <v-toolbar color="white">
      <h4 class="text-lg-left"><b>Push Notification</b></h4>
      <v-spacer></v-spacer>
      <v-flex xs6 sm4>
      <v-text-field justify-right
        prepend-icon="search"
        v-model="search"
        label="Find your users"
        single-line
        hide-details
        color="black"
      > 
    </v-text-field>
    </v-flex>
    </v-toolbar>
    <v-card>
    <v-card-text>
    <v-flex xs12>
    <v-textarea
        v-model="SendNotificationcredentials.message"
        solo
        name="input-7-4"
        label="Hello Users!">
    </v-textarea>
    </v-flex>
    </v-card-text>
    <v-flex text-xs-right>
    <div>
    <v-btn large class="text-lg-right" :disabled="!selected[0]" @click="send" color="black" id="active">send</v-btn>
    </div></v-flex>
    <v-container grid-list-xl>
    <v-card>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      v-model="selected"
      item-key="Name"
      select-all
      class="text-xs-left"
      :pagination.sync="pagination"
    >
    <template slot="items" slot-scope="props">
      <th>
        <v-checkbox
          v-model="props.selected"
          primary
          hide-details
        ></v-checkbox>
      </th>
      <td>{{ props.item.Name }}</td>
    </template>
    </v-data-table>
      </v-card>
    </v-container>
    </v-card>
 </v-app>
</template>
<script>
export default {
  data () {
    return {
      message: '',
      search: '',
      selected: [],
      SendNotificationcredentials: {},
      pagination: {
        rowsPerPage: 10,
      },
      headers: [
        {
          text: 'User List',
          align: 'left',
          sortable: false,
      
        },
      ],
      desserts: [
        {
          Name: 'ajay',
        },
        {
          Name: 'amrit',
        },
        {
          Name: 'Disant',
        },
        {
          Name: 'Pardeep',
        }
      ]
    };
  },
  methods: {
    send () {
      console.log('=clicked==', this.SendNotificationcredentials);
    }
  }
};
</script>
<style>
#active{
 color:white;
}
.v-btn--large {
padding: 0 50px;
}
</style>
