<script lang="ts">
    export let title: string;
    export let description: string;
    export let thumbnail: string;
    export let emoji: string;
    export let date: Date;
    export let category: string;
</script>

<div class='grid'>
    <div class='thumbnail'>
        {#if thumbnail }
            <img src="{thumbnail}" alt='thumbnail'/>
        {:else if emoji}
            <img class='emoji' src="{emoji}" alt="thumbnail"/>
        {:else}
            <img src='data:image/svg+xml,{encodeURIComponent('<svg fill="#aaa" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m41 57q-0.8 0-1.4-0.6t-0.6-1.4v-14q0-0.8 0.6-1.4t1.4-0.6h14q0.8 0 1.4 0.6t0.6 1.4v14q0 0.8-0.6 1.4t-1.4 0.6zm0-2h14v-14h-14zm1-2h12l-3.8-5-3 4-2.25-3zm-1 2v-14z"/></svg>')}' alt="fallback"/>
        {/if}

        <div class="tag date">{date.toLocaleDateString('sv-SE')}</div>
        <div class="tag category">{category}</div>
    </div>
    <div class='label'>
        <div class='title'>{title}</div>
        <div class='description'>{description}</div>
    </div>
</div>

<style>
    .grid {
        display: flex;
        height: 100%;
        flex-direction: column;
        position: relative;
        background-color: var(--grid-color);
        transition: background-color 1s;
        &:hover {
            img {
                transform: scale(1.03);
            }
            .title{
                text-decoration-line: underline;
            }
        }
    }

    .thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/0.6;
        max-height: 200px;
    }
    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        margin-inline: auto;
        transition: transform .3s ease-out;
    }
    .emoji {
        height: 70%;
    }

    .tag{
        position: absolute;
        top: 5px;
        padding: 2px;
        background-color: var(--back-color);
        border-radius: 3px;
        font-size: 0.85em;
    }
    .date {
        right:5px;
    }
    .category {
        left: 5px;
    }

    .label {
        flex-grow: 1;
        height: 100%;
        width: 100%;
    }
    .title {
        font-size: 1.17em;
        font-weight: bold;
        margin: 4px 8px;
    }
    .description {
        margin:8px;
        font-size: .9em;
    }
</style>