<script>
  import { Button } from '@sveltestrap/sveltestrap';
  import { page } from '$app/stores';
</script>

<div class="container text-center mt-5">
  <div class="row">
    <div class="col-lg-6 mx-auto">
      <i class="bi bi-exclamation-triangle display-1 text-warning"></i>
      <h1 class="display-4">{$page.status}</h1>
      <p class="lead">{$page.error?.message || 'Что-то пошло не так'}</p>
      
      <div class="mt-4">
        <Button color="primary" href="/" class="me-3">
          <i class="bi bi-house"></i> На главную
        </Button>
        <Button color="secondary" on:click={() => location.reload()}>
          <i class="bi bi-arrow-clockwise"></i> Обновить
        </Button>
      </div>
    </div>
  </div>
</div>