<div id="content">
	<v-app dark style="background: transparent">
		<v-system-bar app absolute="true" window height="32" color="transparent">
			<v-img v-on:click="showMenu = !showMenu" src="https://raw.githubusercontent.com/oscartbeaumont/ElectronPlayer/master/build/icon.png" max-height="22" max-width="22"></v-img>
			<span v-on:click="showMenu = !showMenu" class="ml-2 font-weight-medium">ElectronPlayer</span>
			<v-spacer></v-spacer>
			<v-icon>remove</v-icon>
			<v-icon>check_box_outline_blank</v-icon>
			<v-icon>close</v-icon>
		</v-system-bar>
		<v-expand-transition>
			<v-toolbar dense flat light v-show="showMenu" style="margin-top: 32px; background: transparent" class="pa-0" id="menu-toolbar">
				<template v-for="(menu, i) in menus" :key="i">
					<template v-if="menu.type == undefined">
						<v-menu light offset-y>
							<template v-slot:activator="{ on }">
								<v-btn dark flat class="menu-btn ma-0 py-1 px-2 text-capitalize" v-on="on">{{ menu.name }}</v-btn>
							</template>
				<v-list>
					<v-list-tile v-for="(item, itemindex) in menu.items" :key="itemindex" @click="" style="height: 24px" :inactive="item.disabled" :class="{'item-disabled' : item.disabled}">
						<template v-if="item.type === undefined">
										<v-list-tile-title>{{ item.name }}</v-list-tile-title>
										<v-list-tile-content></v-list-tile-content>
										<v-list-tile-action class="pl-2 accelerator">
											{{ item.accelerator || "" }}
										</v-list-tile-action>
									</template>
						<template v-else>
										<v-divider></v-divider>
									</template>
					</v-list-tile>
				</v-list>
				</v-menu>
				</template>
				<template v-else>
						<v-btn dark flat class="menu-btn ma-0 py-1 px-2 text-capitalize" v-on:click="settings.showDialog = true">{{ menu.name }}</v-btn>
					</template>
				</template>
			</v-toolbar>
		</v-expand-transition>

		<v-layout align-center justify-center row wrap class="text-xs-center text-white">
			<v-flex xs12>
				<v-layout justify-center row wrap>
					<v-flex xs2 v-for="item in items" :key="item.name" :href="item.url">
						<a :href="item.url" class="item-name">
							<v-img height="94" width="94" :src="item.imgPath" aspect-ratio="1" contain="true" class="mx-auto"></v-img>
							<div class="mt-3">
								<h3 class="font-weight-bold mb-0">{{ item.name }}</h3>
							</div>
						</a>
					</v-flex>
				</v-layout>
			</v-flex>
		</v-layout>
		<v-dialog v-model="settings.showDialog" width="600px">
			<v-card light>
				<v-card-title>
					<span class="headline">Settings</span>
				</v-card-title>
				<v-form ref="form" v-model="valid" lazy-validation>
					<v-subheader>Window settings</v-subheader>

					<v-list>
						<v-list-tile avatar>
							<v-list-tile-content>
								<v-list-tile-title>Always on top</v-list-tile-title>
								<v-list-tile-sub-title>Even when not focused, the window will be visible</v-list-tile-sub-title>
							</v-list-tile-content>

							<v-list-tile-action>
								<v-checkbox v-model="settings.alwaysOnTop"></v-checkbox>
							</v-list-tile-action>
						</v-list-tile>

						<v-list-tile>
							<v-list-tile-content>
								<v-list-tile-title>Remember window details</v-list-tile-title>
								<v-list-tile-sub-title>Will restore the window details as they were when you quitted</v-list-tile-sub-title>
							</v-list-tile-content>

							<v-list-tile-action>
								<v-checkbox v-model="settings.rememberWindowPosition"></v-checkbox>
							</v-list-tile-action>
						</v-list-tile>
						<v-list-tile>
							<v-btn small depressed block color="primary">Set window frameless*</v-btn>
						</v-list-tile>
					</v-list>

						<v-radio-group v-model="settings.defaultService">
					<v-list>
						<v-subheader>Default service</v-subheader>
							<v-list-tile v-for="service in settings.serviceValues" :key="service">
								<v-list-tile-content>
									<v-list-title>{{ service }}</v-list-title>
								</v-list-tile-content>
								<v-list-tile-action>
									<v-radio :value="service"></v-radio>
								</v-list-tile-action>
							</v-list-tile>
					</v-list>
						</v-radio-group>
				</v-form>
				
				<v-subheader>Other</v-subheader>
				<v-list>
						<v-list-tile>
							<v-btn small depressed block color="primary">Edit config</v-btn>
						</v-list-tile>
						<v-list-tile>
							<v-btn small depressed block color="primary">Reset all settings*</v-btn>
						</v-list-tile>
				</v-list>
				
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="green darken-1" flat="flat" @click="settings.showDialog = false">Cancel</v-btn>
					<v-btn color="green darken-1" flat="flat" @click="settings.showDialog = false">Save</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
		</v-layout>
	</v-app>
</div><span class="taille"></span>