FBLA25/src/routes/account/editapplication/+page.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import type { PageProps } from './$types';
	import { employmentTypeDisplayName } from '$lib/shared.svelte';
	import type { Posting } from '$lib/types';
	import { MediaQuery } from 'svelte/reactivity';

	const dateFormatOptions: Intl.DateTimeFormatOptions = {
		year: 'numeric',
		month: 'short',
		day: 'numeric'
	};

	function logoFallback(e: Event, posting: Posting) {
		(e.target as HTMLImageElement).src =
			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(posting.company.name || 'COMPANY')}`;
	}

	const largeScreen = new MediaQuery('min-width: 1024px');

	let { data, form }: PageProps = $props();
</script>

{#snippet jobDetails()}
	<div
		class="elevated separator-borders my-2 h-min rounded p-4 {largeScreen.current
			? 'mr-2 inline-block w-1/2'
			: 'block w-full'}"
	>
		<div class="bottom-border elevated-bg flex justify-between pb-2">
			<div class="inline-block">
				<img
					alt="Company Logo"
					class="inline-block rounded"
					height="64"
					onerror={(e) => logoFallback(e, data.posting)}
					src="/uploads/logos/{data.posting?.company.id}.jpg"
					width="64"
				/>
				<div class="inline-block pl-2 align-top">
					<h1>{data.posting.title}</h1>
					<h2>Company: {data.posting.company.name}</h2>
				</div>
			</div>
		</div>
		<div class="scrollbar-on-elevated overflow-y-scroll">
			<h2 class="pt-2 font-semibold">Contact</h2>
			<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
			<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
				>{data.posting.employer?.email}</a
			>
			<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
				>{data.posting.employer?.phone}</a
			>
			<h2 class="pt-2 font-semibold">Details</h2>
			{#if data.posting.employmentType}
				<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
			{/if}
			{#if data.posting.address}
				<a
					href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
					class="block"
					>Address: <span class="hover-hyperlink break-words">{data.posting.address}</span></a
				>
			{/if}
			{#if data.posting.wage}
				<p>Wage: {data.posting.wage}</p>
			{/if}
			{#if data.posting.createdAt}
				<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
			{/if}
			{#if data.posting.link}
				<a href={data.posting.link} class="block"
					>More information: <span class="hyperlink-color hyperlink-underline break-all"
						>{data.posting.link}</span
					></a
				>
			{/if}
			{#if data.posting.flyerLink}
				<a href={data.posting.flyerLink} class="block"
					>Flyer: <span class="hyperlink-color hyperlink-underline break-all"
						>{data.posting.flyerLink}</span
					></a
				>
			{/if}
			<h2 class="pt-2 font-semibold">Job Description</h2>
			<p class="whitespace-pre-wrap break-words">{data.posting.description}</p>
		</div>
	</div>
{/snippet}

<div class="base-container">
	<div class="content {largeScreen.current ? 'flex' : 'block'}">
		{#if largeScreen.current}
			{@render jobDetails()}
		{/if}
		<div
			class="elevated separator-borders my-2 h-min rounded {largeScreen.current
				? 'inline-block w-1/2'
				: 'block w-full'}"
		>
			<div class="bottom-border flex place-content-between">
				<div class="p-3 font-semibold">Edit Application</div>
			</div>
			<form autocomplete="off" class="px-4" method="POST" use:enhance>
				<div class="mt-4 text-sm font-semibold">
					Why do you believe you are the best fit for this role? <span class="text-red-500">*</span>
					<textarea
						class="w-full rounded font-normal"
						id="candidateStatement"
						name="candidateStatement"
						placeholder="Answer here"
						required
						rows="4">{data.application.candidateStatement}</textarea
					>
				</div>
				<p>
					Your account information and résumé (if supplied) will be submitted along with this
					application. If there is any other information you would like the employer to know, please
					add it in the box above.
				</p>

				{#if form?.errorMessage}
					<div class="mb-2 text-red-500">{form.errorMessage}</div>
				{/if}
				<button
					class="dull-primary-bg-color mb-4 mt-6 rounded px-2 py-1"
					formaction="?/submit&id={data.application.id}"
					type="submit"
					>Save application
				</button>
			</form>
		</div>
		{#if !largeScreen.current}
			{@render jobDetails()}
		{/if}
	</div>
</div>