<script lang="ts">
    import { onMount } from "svelte";
    import { Toast, ToastType } from "$lib/toast";
    import { repos, loadRepos, addToast } from "$lib/stores";
    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from "$lib/api/git";
    import Card from "$lib/components/Cards/Card.svelte";
    import SlidingCard from "$lib/components/Cards/SlidingCard.svelte";
    import Loading from "$lib/components/Loading.svelte";

    onMount(loadRepos);
</script>

<h1>My Projects</h1>
<p>This here is a list of my most recently worked on projects. Note this does not show any private repositories. For more in depth information <a href="https://git.luke-else.co.uk">Click Here</a>.</p>

<div class="container">
    {#if $repos.length > 0}
        <div style="display: none;">{addToast(new Toast("See a snapshot of my latest work.", ToastType.Info, true, 8_000))}</div>
        <div class="cards">
            {#each $repos as repo}
                {#await checkImage(repo)}
                    <Loading />
                {:then hasImage}
                    {#if hasImage}
                        <SlidingCard>
                            <div slot="header">
                                <h2>{repo.name}</h2>
                                {repo.language}
                            </div>
                            <div slot="content">
                                <p class="not-required">{@html repo.description}</p>
                            </div>
                            <div slot="sliding-content">
                                <img width="100%" src="{repo.html_url}{IMAGE_URL_SUFFIX}" alt="{repo.name}" />
                            </div>
                            <div slot="footer">
                                <!-- svelte-ignore a11y-invalid-attribute -->
                                <a href="{repo.html_url}">{repo.name}</a>
                                {timeSince(repo.updated_at)}
                            </div>
                        </SlidingCard>
                    {:else}
                        <Card>
                            <div slot="header">
                                <h2>{repo.name}</h2>
                                {repo.language}
                            </div>
                            <div slot="content">
                                <p class="not-required">{@html repo.description}</p>
                            </div>
                            <div slot="footer">
                                <!-- svelte-ignore a11y-invalid-attribute -->
                                <a href="{repo.html_url}">{repo.name}</a>
                                {timeSince(repo.updated_at)}
                            </div>
                        </Card>
                    {/if}
                {/await}
            {/each}
        </div>
    {:else}
        <Loading />
    {/if}
</div>
