<script setup lang="ts">
import { useRouter } from 'vue-router';


    const router = useRouter();
</script>

<template>
    <q-layout view="hHh lpR fFf">
        <q-page-container>
            <q-page class="row justify-center bg-secondary">
                <div class=" column justify-center" :class="$q.platform.is.mobile ? 'col-11' : 'col-8'">
                    <div class="column rounded-20 q-pa-xs bg-accent" :class="$q.platform.is.mobile ? 'col-5' : 'col-4'">
                        <div class="col">
                            <q-img src="src/assets/line-truck-1.jpg" fit="cover" class="relative-position fit" style="border-radius: 18px 18px 0 0;">
                                <div class="absolute-bottom text-center column flex-center">
                                    <div class="q-pr-md text-white text-h2 text-weight-bolder">404</div>
                                    <div class="q-pr-md text-white text-h5 text-weight-bold">{{
                                        $t('error.not_found_header')
                                    }}</div>
                                </div>
                            </q-img>
                        </div>

                        <div class="col-auto text-center text-h6 text-weight-light bg-dark q-pa-md" style="border-radius: 0 0 18px 18px;">
                            <div>{{ $t('error.not_found_description') }}</div>
                        </div>
                    </div>

                    <div class="col-auto row self-center q-py-md">
                        <q-btn 
                            push
                            dense
                            color="accent"
                            :label="$t('error.go_back')"
                            class="col-auto q-px-md q-py-xs"
                            @click="router.go(-2)"
                        />
                    </div>
                </div>
            </q-page>
        </q-page-container>
    </q-layout>
</template>