<script lang="ts">
    import { getContext } from 'svelte'
    import { page } from '$app/stores'
    // Components
    import Metas from '$components/Metas.svelte'
    import PageTransition from '$components/PageTransition.svelte'
    import ShopHeader from '$components/organisms/ShopHeader.svelte'
    import PostersGrid from '$components/organisms/PostersGrid.svelte'

    const { posters } = getContext('shop')
    const errors = {
        404: {
            title: 'Product not found',
            message: 'The product you are looking for does not exist… yet!',
        },
        500: {
            title: 'Server error',
            message: "That is embarassing, the problem is on our side.",
        },
    }
</script>

<Metas
    title="{errors[$page.status].title} – Houses Of"
/>


<PageTransition name="shop-page">
    <ShopHeader />

    <section class="shop-page__error">
        <div class="container grid">
            <div class="inner">
                <h2 class="title-big">Uh oh!</h2>
                <p class="text-medium">{errors[$page.status].message}</p>
            </div>
        </div>
    </section>

    <PostersGrid {posters} />
</PageTransition>