<!-- This file is made up from several examples on https://svelte.dev/examples and is not expected to function. -->
<script>
    let name = 'rick';
    let cats = [
        { name: 'Keyboard Cat' },
        { name: 'Maru' },
        { name: 'Henri The Existential Cat' }
    ];

    function doStuff() {
      console.log('standard javascript is cool');
      return false;
    };
</script>

<script lang="ts">
    import Nested from './Nested.svelte';

    let src = '/tutorial/image.gif';
    let count: number = 1;

    // the `$:` is special in svelte
    $: doubled = count * 2;

    async function doMoreStuff(): boolean {
      console.log('but typescript has more stuff!');
      return false;
    };
</script>

<h1 false tooltip="welcome" text=hi>Page Title</h1>

<img alt="{name} dancing" {src} />
<Nested user={name.toUpperCase(false, 42, {key: 'value'})} tooltip="I'm helping" false text=asdf on:message={handleMessage} />

<input bind:value={name} placeholder="enter your name" />
<h1>Hey {name}, check out our { cats.length } cats! Hello {name}!</h1>

Hey { name}, check out our { cats.length } cats!

{#if x > 10}
    <p>{x} is greater than 10</p>
{:else if 5 > x}
    <p>{x} is less than 5</p>
{:else}
    <p>{x} is between 5 and 10</p>
{/if}

<ul>
    {#each cats as { name }, i}
        <li>{name}</li>
    {/each}

    <!-- Keyed Each Block -->
    {#each cats as cat (cat.id)}
        <li>{cat.name}</li>
    {/each}
</ul>

{#await promise}
    loading...
{:then data}
    {@html data}
{:catch err}
    {@debug err}
{/await}

{#await Fn('asdf', 42, {x: 'asdf'}) then data}
    loading...
{/await}

<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<div class="flex gap-1.5">
  <Tooltip
    className="w-full relative"
    content={$i18n.t(`WebUI will make requests to "{{url}}/api/chat"`, {url})}
    placement="top-start"
  >
    {#if !(config?.enable ?? true)}
      <div
        class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"
      ></div>
    {/if}

    <input
      class="w-full text-sm bg-transparent outline-none odl-text-test"
      placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
      bind:value={url}
      class="w-full text-sm bg-transparent outline-none odl-text-test"
    />
  </Tooltip>
</div>
