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

    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
    }
    let num = getRandomIntInclusive(100,1000000)

    let search = "asdf"
</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>
        <div class="flex section spacing">
                <div class="flex-grow mr-2">
                    {search}
                    <input bind:value={search} 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 on:click={() => ++num}>Search</Button>
        </div>
    </div>
    <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>
</div>

<style>
    .heading
    {
        @apply text-7xl;
        -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-full flex flex-col items-center justify-center text-center;
        min-height: -webkit-fill-available;
    }
</style>