<script>
	const EXPERIENCE_JOBS = [
		{
			postition: 'Project Coordinator',
			company: 'Rally Engineering',
			location: 'Ab',
			start_month: 'Jan 2025',
			end_month: 'May 2025'
		},
		{
			postition: 'Project Controller Student',
			company: 'Rally Engineering',
			location: 'Ab',
			start_month: 'May 2024',
			end_month: 'Jan 2025'
		},
		{
			postition: 'Staff',
			company: "Red Deer Farmer's Market",
			location: 'Ab',
			start_month: 'Mar 2013',
			end_month: 'Present'
		},
		{
			postition: 'Staff',
			company: 'Ghostrider Storage',
			location: 'BC',
			start_month: 'Mar 2020',
			end_month: 'Present'
		}
	];

	const EXPERIENCE_VOL = [
		{
			postition: 'Software Subteam Lead',
			company: 'UCalgary Baja',
			location: 'Ab',
			start_month: 'Sept 2024',
			end_month: 'Present'
		},
		{
			postition: 'Software, Logistics and Business Sub Team Lead',
			company: 'Schulich Off-Road',
			location: 'Ab',
			start_month: 'May 2023',
			end_month: 'Sept 2024'
		},
		{
			postition: 'Chassis Junior Member',
			company: 'Schulich Off-Road',
			location: 'Ab',
			start_month: 'Sept 2022',
			end_month: 'May 2023'
		},
		{
			postition: 'Coaching with Elk Valley Special Olympics',
			company: 'Elk Valley Dolphins',
			location: 'BC',
			start_month: 'May 2019',
			end_month: 'May 2019'
		}
	];

	let { professional_jobs } = $props();

	let experience = $derived(professional_jobs ? EXPERIENCE_JOBS : EXPERIENCE_VOL);
</script>

<div class="experience-comp">
	{#if professional_jobs === true}
		<h3>Professional</h3>
	{:else}
		<h3>Volunteering</h3>
	{/if}

	<table>
		<colgroup>
			<col class="symbol" />
			<col class="postion" />
			<col class="date-location" />
		</colgroup>
		<tbody>
			{#each experience as exp}
				<tr>
					<td class="symbol" rowspan="2">
						<span class="dot"></span>
					</td>
					<td>{exp.postition}</td>
					<td>{exp.start_month} - {exp.end_month}</td>
				</tr>
				<tr>
					<td>{exp.company}</td>
					<td>{exp.location}</td>
				</tr>
			{/each}
		</tbody>
	</table>
</div>

<style>
	div {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-evenly;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);

		margin: 4svh 0;
	}

	h3 {
		display: flex;
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	table {
		border-collapse: separate;
		border-spacing: 0svh 0px;
	}

	td {
		position: relative;
		margin: 0px;
		padding: 0.25svh 2svw;
	}
	tr:nth-child(even) td {
		padding-bottom: 2svh;
	}

	.postion {
		text-wrap: nowrap;
	}
	.date-location {
		text-wrap: nowrap;
	}
	.symbol {
		position: relative;
		width: 30px;
		text-align: center;
	}

	.symbol[rowspan]::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 2px;
		background-color: rgb(120, 120, 120);
		transform: translateX(-50%);
		z-index: 0;
	}
	.symbol::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 18px;
		height: 18px;
		z-index: 1;
	}

	.dot {
		display: inline-block;
		background-color: rgb(120, 120, 120);
		border-radius: 100%;
		width: 16px;
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		font-weight: bold;
		position: relative;
		z-index: 2;
	}

	tr:nth-child(1) > .symbol::before {
		top: 50%;
	}

	tr:nth-last-child(2) > .symbol::before {
		bottom: 50%;
	}
</style>
