<template>
	<div>
		<div class="banner-bg">
			<div>
				<n-gradient-text :size="40" type="success">
					Zierle-Training
				</n-gradient-text>
				<br>
				<n-gradient-text :size="30" type="info">
					Online Tools
				</n-gradient-text>
			</div>
		</div>

		<div class="home-menu">
			<n-space justify="space-around" >
				<n-space vertical>
					<h2 class="font-bold text-xl mb-4">Documents</h2>
					<a target="_blank" href='https://dev.marczierle.com/zierle-training/generate_document/modify_document.php?selection=0'>
						<n-button type="primary">All Documents</n-button>
					</a>
				</n-space>
				<n-space vertical>
					<h2 class="font-bold text-xl mb-4">Photo Logs</h2>
					<n-space>
						<router-link :to="{name: 'LogsList'}">
							<n-button type="primary">All Logs</n-button>
						</router-link>
						<router-link :to="{name: 'CreateLog'}">
							<n-button type="info">+ New</n-button>
						</router-link>
					</n-space>
					<n-space class="mt-4">
						<router-link :to="{name: 'CameraCapture'}">
							<n-button secondary circle type="info">
								<n-icon><CameraAdd20Filled /></n-icon>
							</n-button>
						</router-link>
						<router-link :to="{name: 'ManagePhotos'}">
							<n-button>Manage Photos</n-button>
						</router-link>
					</n-space>
				</n-space>
			</n-space>
			<!--
			<n-button @click='set_lang("en")'>EN</n-button>
			<n-button @click='set_lang("de")'>DE</n-button>
			-->
		</div>
	</div>
</template>

<script>
import CameraAdd20Filled from '@vicons/fluent/CameraAdd20Filled'
import { loadAndSetLocale } from '@/i18n.js'

export default {
	name: 'HomeView',
	components: {
		CameraAdd20Filled
	},
	methods: {
		set_lang(locale) {
			loadAndSetLocale(this.$root.$i18n, locale)
		}
	}
}
</script>

<style scoped>
.home-menu {
	margin: auto;
	position: relative;
	min-width: 30vw;
	max-width: 60vw;
	min-height: 20vh;
	background-color: white;
	z-index: 1;
	margin-top: 30vh;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
	border: none;
	border-radius: 0 2em;
	padding: 1em;
}

.banner-bg {
	background-image: url('../assets/images/home_bg.webp');
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	z-index: -1;
	border-bottom-left-radius: 100% 30%;
	border-bottom-right-radius: 100% 30%;
	box-shadow: 0 0 50px rgba(0,0,0,0.25);
	position: absolute;
	left: 0;
}

.banner-bg div {
	margin: auto;
	text-align: center;
	margin-top: 3em;
}

a {
	text-decoration: none;
}
</style>