<script lang="ts">
	import Window from '$lib/components/window.svelte';

	import pfp from '$lib/assets/img/pfp.webp';
	import alert from '$lib/assets/img/alert.gif';

	const imported = import.meta.glob('$lib/assets/img/stamps/*', { eager: true });
	let stamps: Array<string> = [];
	for (const img in imported) {
		stamps.push(img);
	}
</script>

<div class="container">
	<!-- about -->
	<Window name="hi :3">
		<p>
			hello!&nbsp;&nbsp; ^w^/<br><br>welcome to my site, feel free to look around and learn something
			your government doesn't want you to know :3
		</p>
	</Window>

	<!-- most wanted -->
	<Window name="most wanted">
		<div id="mostwanted">
			<div class="imgwrap money">
				<img class="noselect" alt="" />
				<h1>FBI's most wanted</h1>
				<img class="noselect" src="" alt="" />
			</div>
			<div id="profile">
				<img class="noselect" src={pfp} alt="" />
				<table>
					<tbody>
						<tr>
							<td>name:</td>
							<td>placeholder</td>
						</tr>
						<tr>
							<td>height:</td>
							<td>placeholder</td>
						</tr>
						<tr>
							<td>species:</td>
							<td>placeholder</td>
						</tr>
						<tr>
							<td><span class="warning">wanted</span> for:</td>
							<td>placeholder</td>
						</tr>
						<tr>
							<td>last seen:</td>
							<td>placeholder</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="info">
				<h3>!INFO!</h3>
				<p>
					likes to smell plants and imprison bugs... can be found eating plastic from your bins and
					drinking kerosene at your nearest airport
				</p>
			</div>
			<div id="caution">
				<h3>!CAUTION!</h3>
				<div class="imgwrap">
					<img class="noselect" src={alert} alt="" />
					<p>will bark very loud if approached</p>
					<img class="noselect" src={alert} alt="" />
				</div>
			</div>
			<div id="reward">
				<h3>!REWARD!</h3>
				<br />
				<div class="imgwrap">
					<img class="noselect" src="" alt="" />
					<p>
						second-hand Hwasong-18 ICBM<br />
						[fuel not included]
					</p>
					<img class="noselect" src="" alt="" />
				</div>
			</div>
		</div>
	</Window>

	<!-- latest posts -->
	<!-- <Window name="posts"></Window> -->

	<!-- stampbook -->
	<Window name="stampbook">
		<div id="stampbook">
			{#each stamps as stamp}
				<img class="stamp noselect" src={stamp} alt="oops..." />
			{/each}
		</div>
	</Window>
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	table {
		border-collapse: collapse;
	}
	td {
		padding: 0.5em;
		padding-top: 0.8em;
		border: 1px solid;
	}
	td:nth-child(odd) {
		text-align: right;
	}
	#mostwanted {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2em;
		h1 {
			color: vars.$warning;
			font-size: 3em;
			padding-top: 0.5em;
		}
		h3 {
			text-align: center;
			font-size: 2em;
		}
		#profile {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1em;
			img {
				width: 256px;
				height: 256px;
				border: 2px solid vars.$highlight;
				box-sizing: border-box;
			}
		}
		#info {
			h3 {
				color: vars.$highlight;
			}
		}
		#caution {
			h3 {
				color: vars.$warning;
			}
			img {
				height: 24px;
				width: 24px;
			}
		}
		#reward {
			border: 2px solid vars.$base-colour;
			background-color: black;
			padding: 1em;
			h3 {
				font-size: 3em;
				color: vars.$base-colour;
				text-decoration: underline;
			}
			img {
				height: 64px;
				width: 64px;
			}
		}
		.money {
			img {
				height: 64px;
				width: 64px;
			}
		}
	}
	#stampbook {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1em;
	}
	.container {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;

		padding: 1em;
		gap: 1em;
	}
	.stamp {
		width: 99px;
		height: 56px;
	}
	.warning {
		color: vars.$warning;
	}
	p {
		text-align: center;
	}
</style>
