<script context="module">
  /** @type {import('@sveltejs/kit').Load} */ 
  export function load({ error, status }) {
    return {
      props: {
        status: status,
        message: error.message,
        stack: error.stack
      }
    };
  }
</script>

<script>
  export let status;
  export let message;
  export let stack;
</script>

<style>
  .gradient {
    font-size: 100px;
    line-height: 0.1;
    background: repeating-linear-gradient(98deg, rgba(190,190,190,1) 0%, rgba(190,190,190,1) 10%, rgba(207,207,207,1) 10%, rgba(207,207,207,1) 20%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
  }
  h1 {
    margin-bottom: 0.5em;
  }
  .error {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
  }
  pre {
    max-width: 100%;
    overflow-x: auto;
    background-color: #222;
    color: #fff;
    padding: 1em;
    border-radius: 1em;
  }
</style>

<div class="error">
  <div class="gradient">
    <h1>{status}</h1>
  </div>
  {message}
  {#if stack}
    <pre>{stack}</pre>
  {/if}
</div>