<script lang="ts">
	import MarkdownIt from 'markdown-it';
	const md = new MarkdownIt({
		html: true,
		xhtmlOut: true,
		typographer: true,
		breaks: true,
		linkify: true
	});
	import type { Schema } from 'src/model/job';
	export let job: Schema;
	export let currentLanguage = '';
</script>

<div class="job-container">
	<h3>{job.title[currentLanguage]}</h3>
	<div class="content">
		<div class="image-container">
			{#each job.images as image}
				<img src={image} alt={image} />
			{/each}
		</div>
		<div class="text-content">
			{@html md.render(job.content[currentLanguage])}
		</div>
	</div>
	<div class="added-info">
		{#if job.year.lenght != 0}
			Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
		{/if}
		<div>
			{#if job.collaborators.length != 0}
				Collab:
			{/if}
			{#each job.collaborators as collaborator, index}
				<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
				job.collaborators.length - 1
					? ', '
					: ''}
			{/each}
		</div>
		<div>
			{#if job.languages.length != 0}
				Lang:
			{/if}
			{#each job.languages as language, index}
				{language}{index != job.languages.length - 1 ? ', ' : ''}
			{/each}
		</div>
		<div>
			{#if job.tecnologies.length != 0}
				Tech:
			{/if}
			{#each job.tecnologies as tecnology, index}
				{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
			{/each}
		</div>
	</div>
</div>

<style lang="scss">
	@import '../app.scss';
	.text-content {
		margin: auto;
		text-align: justify;
	}
	.added-info {
		text-align: left;
		font-size: smaller;
	}
	.content{
		margin-top: 0;
	}
	.job-container {
		img {
			background-color: $text-color;
		}
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		background-color: $basecolor2;
		border-radius: $default-border-radius;
		padding: 30px;
		margin:30px;
		
		@media (min-width: 1250px) {
			width: 38%;
		}
	}
</style>
