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

      <app-toolbar class="app--toolbar">
        </app-toolbar>

      <v-toolbar color="white">

        <h4 class="text-lg-left text"><b>Push Notification</b></h4>

        <v-spacer></v-spacer>

        <v-flex xs5 sm4 class="searchIcon">

        <v-text-field justify-right

          prepend-icon="search"
          v-model="search"
          label="Find your users"
          single-line
          hide-details

          color="black"

          class="mb-4"

        > 

      </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 mr-4" :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>

  import axios from 'axios';

  import AppToolbar from '@/components/AppToolbar';

  export default {

    components: {
      AppToolbar,
    },

    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;
  }

  @media screen and (max-width: 769px){
  .text{
    font-size: 15px;
  }
  .searchIcon .v-icon {
      font-size: 20px;
      margin-left: 20px;
  }
  }

  /* .v-btn--large {

  padding: 0 50px;

  } */

  </style>