<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
          solo
          name="input-7-4"
          label="Hello Users!">
      </v-textarea>
      </v-flex>
      </v-card-text>
      <v-flex text-xs-right>
      <div>
      <v-btn dark large class="text-lg-right" >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

            @click.native="toggleAll"

          ></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 {
        search: '',
        selected: [],

        pagination: {
          rowsPerPage: 10,
        },

        headers: [
          {
            text: 'User List',
            align: 'left',
            sortable: false,

          },

        ],
        desserts: [
          {

            Name: 'ajay',

          },
          {
            Name: 'amrit',
          },
          {

            Name: 'Disant',

          },
          {

            Name: 'Pardeep',

          }

        ]
      };

    },
    methods: {
      toggleAll () {
        if (this.selected.length) this.selected = [];
        else this.selected = this.desserts.slice();
      
      }

    }
  };

  </script>