<template>
	<main
		:aria-label="t('Mon CV')"
		class="relative md:h-[297mm] md:w-[210mm] overflow-hidden bg-white shadow-lg print:m-0 print:h-screen! print:w-screen! print:shadow-none grid md:grid-cols-3 print:grid-cols-3 md:grid-rows-[min-content_1fr] print:grid-rows-[min-content_1fr] m-auto"
	>
		<div
			class="order-1 md:col-span-1 print:col-span-1 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0 md:bg-slate-100 print:bg-slate-100"
		>
			<div class="m-[4mm]">
				<img
					id="avatar"
					src="/avatar.webp"
					height="150"
					width="150"
					class="rounded-full border-[#caca] border-[1mm] m-auto"
					:alt="t('IMG_ALT.AVATAR')"
				/>
			</div>
		</div>
		<div
			class="order-2 md:col-span-2 print:col-span-2 md:p-[10mm] print:p-[10mm] md:pb-0 print:pb-0"
		>
			<h1
				class="text-xl md:text-2xl print:text-2xl text-center md:mt-[14mm] print:mt-[14mm]"
			>
				Morgane de Carpentier
				<br /><strong>
					{{ t("Conceptrice Développeuse FullStack") }}
				</strong>
			</h1>
		</div>

		<div
			class="order-3 md:order-4 print:order-4 md:col-span-2 print:col-span-2 p-[10mm]"
		>
			<section aria-labelledby="my-experience">
				<h2
					id="my-experience"
					class="text-xl text-center md:text-left print:text-left"
				>
					{{ t("Expérience") }}
				</h2>

				<ul>
					<ExperienceInfo
						v-for="experience in experiences"
						:key="experience.date"
						v-bind="experience"
					/>
				</ul>
			</section>

			<section
				class="mt-15 md:mt-[20mm] print:mt-[20mm]"
				aria-labelledby="my-education"
			>
				<h2
					id="my-education"
					class="text-xl text-center md:text-left print:text-left"
				>
					{{ t("Formation") }}
				</h2>

				<ul>
					<li
						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
					>
						<div
							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
						>
							2014-2015
						</div>
						<div class="md:col-span-5 print:col-span-5">
							<strong> {{ t("Licence CDED") }} </strong>
							{{
								t(
									"(Concepteur-développeur en environnement distribué)",
								)
							}}
							<address>
								{{ t("ADDRESS.IUT_ROBERT_SCHUMAN") }}
							</address>
						</div>
					</li>

					<li
						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
					>
						<div
							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
						>
							2013-2014
						</div>
						<div class="md:col-span-5 print:col-span-5">
							<strong> {{ t("Licence 3 Math-Info") }} </strong>
							<address>{{ t("ADDRESS.UFR_MATH_INFO") }}</address>
						</div>
					</li>

					<li
						class="grid md:grid-cols-6 print:grid-cols-6 md:gap-1 print:gap-1"
					>
						<div
							class="md:col-span-1 print:col-span-1 text-center md:text-left print:text-left text-slate-600"
						>
							2011-2013
						</div>
						<div class="md:col-span-5 print:col-span-5">
							<strong> {{ t("DUT Informatique") }} </strong>
							<address>
								{{ t("ADDRESS.IUT_ROBERT_SCHUMAN") }}
							</address>
						</div>
					</li>
				</ul>
			</section>
		</div>
		<div
			class="order-4 md:order-3 print:order-3 md:col-span-1 print:col-span-1 p-[10mm] pr-[8px] bg-slate-100 grid grid-cols-2 md:grid-cols-1 print:grid-cols-1"
		>
			<section
				class="order-4 md:order-1 print:order-1 md:mt-[6px] print:mt-[6px]"
			>
				<h3>{{ t("Contact") }}</h3>
				<ul class="mb-[10mm] ms-1">
					<QuickInfo icon="fa-calendar">
						{{
							t("@count years", {
								count: new Date().getFullYear() - 1992,
							})
						}}
					</QuickInfo>
					<QuickInfo icon="fa-map-marker">
						<address class="not-italic">
							2a rue Poincaré
							<br />67800 Bischheim
							<span class="sr-only"
								>({{ t("Prononcé") }}
								<span lang="fr">bichailleme</span>)</span
							>
						</address>
					</QuickInfo>
					<QuickInfo icon="fa-phone">
						<a href="tel:+33602325541">06 02 32 55 41</a>
					</QuickInfo>
					<QuickInfo icon="fa-envelope">
						<a href="mailto:morgane@de-carpentier.fr"
							>morgane@de-carpentier.fr</a
						>
					</QuickInfo>
				</ul>
			</section>

			<section class="order-3 md:order-2 print:order-2">
				<h3>{{ t("Langues") }}</h3>
				<ul class="mb-[10mm] ms-1">
					<li>
						<button
							class="flex cursor-pointer"
							@click="locale = 'fr'"
						>
							<div
								class="w-[6mm] flex justify-center items-center"
								aria-hidden="true"
							>
								<img
									src="/fr.svg"
									class="w-[4mm] align-middle"
									height="15"
									width="10"
									:alt="t('IMG_ALT.FRENCH_FLAG')"
								/>
							</div>
							<div>{{ t("Français") }}</div>
						</button>
					</li>

					<li>
						<button
							class="flex cursor-pointer"
							@click="locale = 'en'"
						>
							<div
								class="w-[6mm] flex justify-center items-center"
								aria-hidden="true"
							>
								<img
									src="/en.svg"
									class="w-[4mm] align-middle"
									height="15"
									width="10"
									:alt="t('IMG_ALT.ENGLISH_FLAG')"
								/>
							</div>
							<div>{{ t("Anglais") }}</div>
						</button>
					</li>
				</ul>
			</section>

			<section class="order-2 md:order-3 print:order-3">
				<h3>{{ t("Intérêts") }}</h3>
				<ul class="mb-[10mm] ms-1">
					<QuickInfo icon="fa-dragon">
						{{ t("Jeux de rôle / société") }}
					</QuickInfo>
					<QuickInfo icon="fa-running">
						{{ t("Escalade, vélo") }}
					</QuickInfo>
					<QuickInfo icon="fa-cube">
						{{ t("Impression 3D") }}
					</QuickInfo>
				</ul>
			</section>

			<section class="order-1 md:order-4 print:order-4 mb-[31px]">
				<h3>{{ t("TODO") }}</h3>
				<ul class="mb-[10mm] ms-1">
					<QuickInfo icon="fa-regular fa-square-check">
						<a
							:href="t('LINKS.KISS')"
							target="_blank"
						>
							{{ t("KISS") }}
							<sup class="hidden print:inline">1</sup>
						</a>
					</QuickInfo>
					<QuickInfo icon="fa-regular fa-square-check">
						<a
							:href="t('LINKS.SOLID')"
							target="_blank"
						>
							{{ t("Stay SOLID") }}
							<sup class="hidden print:inline">2</sup>
						</a>
					</QuickInfo>
					<QuickInfo icon="fa-regular fa-square-check">
						<a
							:href="t('LINKS.DRY')"
							target="_blank"
						>
							{{ t("Stop being WET and DRY up") }}
							<sup class="hidden print:inline">3</sup>
						</a>
					</QuickInfo>
					<QuickInfo icon="fa-regular fa-square-check">
						<a
							:href="t('LINKS.DIVIDE_AND_CONQUER')"
							target="_blank"
						>
							{{ t("Diviser pour mieux régner") }}
							<sup class="hidden print:inline">4</sup>
						</a>
					</QuickInfo>
				</ul>
			</section>
		</div>

		<div
			class="absolute bottom-0 w-full text-xs hidden print:flex justify-start"
			aria-hidden="true"
		>
			<!-- Display the url links at the bottom of the resume when printed -->
			<ul class="bg-white m-[10mm] mb-[8mm] p-[2mm] border rounded-sm">
				<li lang="en">
					<sup aria-hidden="true">1</sup>
					{{ t("LINKS.KISS") }}
				</li>
				<li lang="en">
					<sup aria-hidden="true">2</sup>
					{{ t("LINKS.SOLID") }}
				</li>
				<li lang="en">
					<sup aria-hidden="true">3</sup>
					{{ t("LINKS.DRY") }}
				</li>
				<li>
					<sup aria-hidden="true">4</sup>
					{{ t("LINKS.DIVIDE_AND_CONQUER") }}
				</li>
			</ul>
		</div>
	</main>
</template>

<script setup lang="ts">
import { computed } from "vue";
import QuickInfo from "./QuickInfo.vue";
import ExperienceInfo from "./ExperienceInfo.vue";
import type { Props as ExperienceInfoProps } from "./ExperienceInfo.vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

const experiences = computed<ExperienceInfoProps[]>(() => [
	{
		date: t("2023-Aujourd'hui"),
		title: t("Développeuse senior chez Jaune de Mars"),
		missions: [
			t("Logiciel de gestion de parc/pannes d'appareils"),
			t("Migration progressive des outils et technologies internes"),
			t("Mise en place d'outils d'analyse de code"),
			t("Implémentation d'un système d'intégration continue"),
		],
		technos: [
			"TypeScript",
			"VueJs",
			"PHP",
			"Symfony",
			"Redis",
			"PostgreSQL",
			"Docker",
			"Kubernetes",
			"GitLab CI/CD",
		],
	},
	{
		date: "2019-2023",
		title: t("Développeuse logiciel chez Caldera"),
		missions: [
			t("Logiciels d'automatisation du prépresse"),
			t("Référente technique des solutions web internes"),
			t("Veille et mises à jours technologiques"),
			t("Amélioration du système d'intégration continue"),
		],
		technos: ["TypeScript", "VueJs", "Electron", "GitLab CI/CD"],
	},
	{
		date: "2019",
		title: t("Développeuse web chez Thuria"),
		missions: [
			t("Amélioration des outils de développement internes"),
			t("Réalisation de sites vitrines"),
		],
		technos: ["PHP", "Wordpress", "Symfony", "ElasticSearch"],
	},
	{
		date: "2014-2019",
		title: t("Conceptrice développeuse chez AZ Conception"),
		missions: [
			t("Solution de géolocalisation et réservation de taxi"),
			t("Référente technique des solutions web internes"),
			t("Veille et mises à jours technologiques"),
			t("ERP, sites e-commerce et sites vitrines"),
		],
		technos: [
			"PHP",
			"Laravel",
			"VueJs",
			"Docker",
			"Nginx",
			"MySql",
			"Redis",
			"Magento",
			"Drupal",
		],
	},
]);
</script>
