<template>
	<div>
		<page-title-bar></page-title-bar>
		<v-container fluid class="grid-list-xl pt-0 mt-n3">
			<v-row>
				<app-card
					:heading="$t('message.timePicker')"
					contentCustomClass="div-responsive"
					colClasses="col-12 col-md-6"
				>
					<v-time-picker v-model="e4"></v-time-picker>
				</app-card>
				<app-card 
					:heading="$t('message.timePicker')" 
					contentCustomClass="div-responsive" 
					colClasses="col-12 col-md-6"
				>
					<v-time-picker v-model="e5" landscape></v-time-picker>
				</app-card>
			</v-row>
			<v-row>
				<app-card
					:heading="$t('message.timePickerInDialogAndMenu')"
					colClasses="col-12 col-md-6"
				>
					<div class="mb-4">
						<p class="mb-0">Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.</p>
					</div>
					<v-menu
						ref="menu"
						:close-on-content-click="false"
						v-model="menu2"
						transition="scale-transition"
						offset-y
						:nudge-right="40"
						max-width="290px"
						min-width="290px"
						:return-value.sync="time"
					>
						<template v-slot:activator="{ on }">
							<v-text-field
								v-on="on"
								label="Picker in menu"
								v-model="time"
								prepend-icon="access_time"
								readonly
							></v-text-field>
						</template>
						<v-time-picker v-model="time" @change="$refs.menu.save(time)"></v-time-picker>
					</v-menu>
				</app-card>				
				<app-card
					:heading="$t('message.timePicker')"
					colClasses="col-12 col-md-6"
				>
					<v-dialog
						ref="dialog"
						persistent
						v-model="modal2"
						width="290px"
						:return-value.sync="time2"
						>
						<template v-slot:activator="{ on }">
							<v-text-field
								v-on="on"
								label="Picker in dialog"
								v-model="time2"
								prepend-icon="access_time"
								readonly
							></v-text-field>
						</template>
						<v-time-picker v-model="time2" actions>
							<v-btn color="error" @click="modal2 = false">Cancel</v-btn>
							<v-btn color="primary" @click="$refs.dialog.save(time2)">Save</v-btn>
						</v-time-picker>
					</v-dialog>
				</app-card>
			</v-row>
		</v-container>
	</div>
</template>

<script>
export default {
  data() {
    return {
      e4: null,
      e5: null,
      time: null,
      time2: null,
      menu2: false,
      modal2: false
    };
  }
};
</script>
