<template>
<div id="app">
	<nav class="navbar navbar-expand navbar-dark bg-dark">
		<!-- <a href="#" class="navbar-brand">{{ $t('global.openPharma') }}</a> -->
		<a href="/" class="navbar-brand" style="font-family:'Ubuntu Medium"><img src="@/assets/logo.png" style="margin-right: 8px; width:41px">{{ $t('global.openPharma') }}</a>
		<div class="navbar-nav mr-auto">
			<li class="nav-item">
				<a href="/Clients" class="nav-link">{{ $t('global.viewsHome.clients.title') }}</a>
			</li>
			<li class="nav-item">
				<a href="/Products" class="nav-link">{{ $t('global.viewsHome.products.title') }}</a>
			</li>
			<li class="nav-item">
				<a href="/Updates" class="nav-link">Updates</a>
			</li>
			<li class="nav-item">
				<a href="/Settings" class="nav-link">Settings</a>
			</li>
		</div>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		</form>
		<div class="navbar-nav mr-auto locale-changer">
			<select v-model="$i18n.locale" class="form-control">
				<option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang.lang">{{ lang.locale }}</option>
			</select>
		</div>
	</nav>

	<!-- Container VueJS -->
	<div class="container-fluid">
		<router-view/>
	</div>
</div>
</template>

<script>
export default {
	name: 'App',
	data () {
		return { langs: [] }
	},
	mounted () {
		console.log('App monted')
		for (var property in this.$i18n.messages) {
			if (this.$i18n.messages.hasOwnProperty(property)) {
				this.langs.push({ 'lang': property, 'locale': this.$i18n.messages[property].global.locale })
			}
		}
	},
	methods: {
		getTrucs () {
		}
	}
}
</script>

<style>
#app {
	font-family: 'OpenSans', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
@font-face {
	font-family: "Ubuntu Medium";
	src: url("~@/assets/fonts/Ubuntu-Medium.ttf") format('truetype');
}
@font-face {
	font-family: "OpenSans";
	src: url("~@/assets/fonts/OpenSans-Regular.ttf") format('truetype');
}
</style>