<script>
    import { site } from '../utils/store'

    // Components
    import IconArrow from '../atoms/IconArrow'
    import TitleSite from '../atoms/TitleSite'
    import Button from '../atoms/Button'
    import InteractiveGlobe from '../molecules/InteractiveGlobe'
    import Footer from '../organisms/Footer'

    // Props
    export let status
    export let error
</script>

<svelte:head>
    <title>{$site.seo_name} - {error.message}</title>
</svelte:head>

{#if process.env.NODE_ENV === 'development' && error.stack}
<div class="wrap">
    <pre>{error.stack}</pre>
</div>
{/if}

<section class="page">
    <div class="wrap">
        <div class="page__top">
            <a href="/" class="button-control button-control--pink dir-left">
                <IconArrow direction="left" color="#fff" class="icon" />
                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
            </a>

            <TitleSite />
        </div>

        <div class="page__description style-description">
            <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
            <Button href="/" class="button" text="Go back to the homepage" on:click={() => window.location.href = '/'} />
        </div>

        <InteractiveGlobe type="part" />
    </div>

    <Footer />
</section>
