<script lang="ts">
	import HeadTitle from '$lib/Home/HeadTitle.svelte';
	import Picker from '$lib/Tools/Picker.svelte';
	import { tools } from '$lib/Tools/tools.js';

	let tool = 'default';
</script>

<Picker {tool} />

<HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />

<div class="card">
	<p>Select a tool to continue.</p>

	<ul>
		{#each Object.keys(tools) as t}
			{#if t !== 'default'}
				<li>
					<a href={`/tools/${tools[t].id}`} on:click={() => (tool = t)}>{tools[t].name}</a>
					{#if tools[t].description}
						<blockquote>{tools[t].description}</blockquote>
					{/if}
				</li>
			{/if}
		{/each}
	</ul>

	<p />

	<blockquote style="margin: 0 0 0 1.5rem;">
		Have any requests for cool tools that you think others might find useful? Send a private message
		to
		<a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
	</blockquote>
</div>
