<script lang="typescript">
	// Nested is defined elsewhere
	import Nested from './Nested.svelte';

	let src = 'example.png';
	let name = 'world';

	let names = [
		{ id: 'id0001', name: 'Name 1' },
		{ id: 'id0002', name: 'Name 2' },
		{ id: 'id0003', name: 'Name 3' }
	];
</script>

<style>
	h1 {
		color: red;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 2em;
	}
</style>

<style lang="sass">
$color: red
h1
  color: $color
  font-family: Arial, Helvetica, sans-serif
  font-size: 2em
</style>

<h1>Hello {name}!</h1>
<img {src} alt="Example image">

<!-- import external component -->
<Nested/>

<ul>
    {#each names as { id, name }, i}
	<li>{name} ({id})</li>
	{/each}
</ul>

<template>
    <form on:submit|preventDefault="{submitSearch}">
        <input type="search" bind:value="{name}" required />
        <button type="submit">Search</button>
    </form>

    {#if porridge.temperature > 100}
	<p>too hot!</p>
    {:else if 80 > porridge.temperature}
	<p>too cold!</p>
    {:else}
	<p>just right!</p>
    {/if}

    {#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
    {:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
    {:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
    {/await}

    {#await promise then value}
	<p>The value is {value}</p>
    {/await}

    {#await promise catch error}
	<p>The error is {error}</p>
    {/await}

    {#key value}
	<div transition:fade>{value}</div>
    {/key}

    <div class="blog-post">
	    <h1>{post.title}</h1>
	    {@html post.content}
    </div>

    {@debug user}
</template>