<script>
import projectMapLink from './projectMapLink.vue';
import spotIcon from './spotIcon.vue';
import projectRelTime from './projectRelTime.vue';
import projectMediaLink from './projectMediaLink.vue';
import { options } from '../scripts/lightbox';

export default {
	components: {
		spotIcon,
		projectMapLink,
		projectMediaLink,
		projectRelTime
	},
	//props: {
	//	options: Object,
	//},
	data() {
		return {
		}
	},
	//inject: ['options', 'medias', 'spot', 'project'],
	mounted() {
		
	}
}
</script>

<template>
	<div class="info-window">
		<h1>
			<spotIcon :icon="'message'" :classes="'fa-lg'" :text="spot.lang('post_message')+' '+spot.lang('counter', options.displayed_id)" />
			<span class="message-type">({{ options.type }})</span>
		</h1>
		<div class="separator"></div>
		<p class="coordinates">
			<spotIcon :icon="'coords'" :classes="'fa-fw fa-lg'" :margin="true" />
			<projectMapLink :options="options" />
		</p>
		<p class="time">
			<projectRelTime :icon="'time'" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
			<span v-if="project.mode==spot.consts.modes.blog"> ({{ options.relative_time }})</span>
		</p>
		<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':spot.lang(options.weather_cond)">
			<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
		</p>
		<div v-if="medias" class="separator"></div>
		<div v-if="medias" class="medias">
			<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
		</div>
	</div>
</template>