<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">

	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>vuetify demo</title>
	<style>
	[v-cloak] {
		display: none;
	}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<v-app>
			<v-content>
				<v-container v-init-context-vars='{expand: false}'>
					<v-btn color="success">Success</v-btn>
					<v-btn color="warning" :depressed="true">Warning</v-btn>
					<v-btn color="warning" :text="true">Warning</v-btn>
					<v-btn color="warning" href="https://google.com">Google</v-btn>
					<v-btn color="info">Info</v-btn>
					<v-btn color="info" :large="true">Info</v-btn>
					<v-btn color="info" :rounded="true">Info</v-btn>

					<div v-ripple style="width: 100px; height: 100px; border: 1px solid red;">
						Ripple
					</div>


					<v-btn @click="test = !test">show</v-btn>

					<v-expand-transition>
						<v-card
						  v-show="test"
						  height="100"
						  width="100"
						  class="mx-auto"
						  key="123"
						></v-card>
					</v-expand-transition>


					<v-card>
						<v-card-title>
							Nutrition
							<v-spacer></v-spacer>
							<v-text-field append-icon="search" label="Search" single-line hide-details>
							</v-text-field>
						</v-card-title>


						<v-data-table show-select show-expand item-key="name" :headers="[
						{
						  text: 'Dessert (100g serving)',
						  align: 'left',
						  sortable: false,
						  value: 'name'
						},
						{ text: 'Calories', value: 'calories' },
						{ text: 'Fat (g)', value: 'fat' },
						{ text: 'Carbs (g)', value: 'carbs' },
						{ text: 'Protein (g)', value: 'protein' },
						{ text: 'Iron (%)', value: 'iron' }
					  ]" :items="[
						{
						  name: 'Frozen Yogurt',
						  calories: 159,
						  fat: 6.0,
						  carbs: 24,
						  protein: 4.0,
						  iron: '1%'
						},
						{
						  name: 'Ice cream sandwich',
						  calories: 237,
						  fat: 9.0,
						  carbs: 37,
						  protein: 4.3,
						  iron: '1%'
						},
						{
						  name: 'Eclair',
						  calories: 262,
						  fat: 16.0,
						  carbs: 23,
						  protein: 6.0,
						  iron: '7%'
						},
						{
						  name: 'Cupcake',
						  calories: 305,
						  fat: 3.7,
						  carbs: 67,
						  protein: 4.3,
						  iron: '8%'
						},
						{
						  name: 'Gingerbread',
						  calories: 356,
						  fat: 16.0,
						  carbs: 49,
						  protein: 3.9,
						  iron: '16%'
						},
						{
						  name: 'Jelly bean',
						  calories: 375,
						  fat: 0.0,
						  carbs: 94,
						  protein: 0.0,
						  iron: '0%'
						},
						{
						  name: 'Lollipop',
						  calories: 392,
						  fat: 0.2,
						  carbs: 98,
						  protein: 0,
						  iron: '2%'
						},
						{
						  name: 'Honeycomb',
						  calories: 408,
						  fat: 3.2,
						  carbs: 87,
						  protein: 6.5,
						  iron: '45%'
						},
						{
						  name: 'Donut',
						  calories: 452,
						  fat: 25.0,
						  carbs: 51,
						  protein: 4.9,
						  iron: '22%'
						},
						{
						  name: 'KitKat',
						  calories: 518,
						  fat: 26.0,
						  carbs: 65,
						  protein: 7,
						  iron: '6%'
						}
					  ]" class="elevation-1">
							<template v-slot:items="props">
								<td>{{ props.item.name }}</td>
								<td class="text-xs-right">{{ props.item.calories }}</td>
								<td class="text-xs-right">{{ props.item.fat }}</td>
								<td class="text-xs-right">{{ props.item.carbs }}</td>
								<td class="text-xs-right">{{ props.item.protein }}</td>
								<td class="text-xs-right">{{ props.item.iron }}</td>
							</template>

							<template v-slot:expanded-item="{ headers }">
								<td :colspan="headers.length">Peek-a-boo!</td>
							  </template>

						</v-data-table>

					</v-card>
				</v-container>

			</v-content>
		</v-app>
	</div>

	<script src="http://localhost:3080/app.js"></script>
	<script src="http://localhost:3100/app.js"></script>

</body>

</html>