<script>
    import {link} from 'svelte-spa-router'
    import Button from "../Components/Button.svelte";

    const get = async () =>
    {
        let res = await fetch('https://nhwh2z1zze.execute-api.us-east-1.amazonaws.com/TotalPosts')
        let val = await res.text()
        console.log(val)
        return val
    }
    let query = ""
</script>

<div class="main">
    <div class="spacing">
        <h1 class="heading section spacing">Subooru</h1>
        <div class="section spacing">
            <ul>
                <li><a href="/" use:link>Posts</a></li>
                <li>Comments</li>
                <li>Tags</li>
                <li>Wiki</li>
                <li>Documentation</li>
            </ul>
        </div>
        <form>
            <div class="flex section spacing items-baseline">
                <div class="flex-grow mr-2">
                    <input bind:value={query} required type="text" class="w-full text-black shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Image Search">
                </div>
                <Button rounded blue>Search</Button>
            </div>
        </form>
    </div>
    {#await get()}
        <div class="spacing">
            ...
        </div>
        <div class="spacing">
            Serving ??? posts
        </div>
    {:then num}
        <div class="spacing">
            {#each num.toString() as d}
                <img alt={d} src={`https://shimmie.shishnet.org/ext/home/counters/newcounter/${d}.gif`} />
            {/each}
        </div>
        <div class="spacing">
            Serving {new Intl.NumberFormat().format(num)} posts
        </div>
    {:catch ex}
        <div class="spacing">
            <div class="text-9xl md:h-40 h-20">😢</div>
        </div>
        <div class="spacing">
            Error loading number of posts.
        </div>
    {/await}
</div>

<style>
    .heading
    {
        @apply text-7xl;
        -webkit-text-stroke: 0.02em white;
    }
    :global(.dark) .heading
    {
        -webkit-text-stroke: 0.02em black;
    }
    ul li { @apply ml-1 mr-1 inline; }
    img
    {
        @apply inline-block text-white md:h-40 h-20;
        aspect-ratio: 1/1.66;
    }
    .section .spacing
    {
        @apply lg:mt-4 lg:mb-4 md:mt-2 md:mb-2 mt-0 mb-0;
    }
    .spacing
    {
        @apply lg:mt-6 lg:mb-6 md:mt-4 md:mb-4 mt-2 mb-2;
    }
    .main
    {
        @apply min-h-screen flex flex-col items-center justify-center text-center;
        min-height: -webkit-fill-available;
    }
</style>