<template>
    <div>
        <div class="vh-100 bg-plum-plate bg-animation">
            <div class="">
                <div  class="app-header header-shadow bg-light text-lighter">
                    <router-link  
                        :to="'/'" 
                        class="btn-link pl-3"
                    >
                        <div class="logo-src" :style='{ background: "url(" + share_url + "white-logo.png" + ")" }'></div>
                    </router-link>
                    <div class="pl-3 app-header-title">
                        <h5 class="card-title">Page 404</h5>
                    </div>
                </div>
                <div class="d-flex justify-content-center align-items-center">
                    <b-col class="mobile-none top-margin-100" md="5">
                        <div class="mb-3 text-center">
                            <img class="img-fluid big-logo" :src="share_url + 'logo.png'">
                        </div>
                        <div class="text-white text-center">
                            <h1 class="mb-2">Page 404</h1>
                        </div>
                    </b-col>
                </div>
                <div class="footer text-center text-white opacity-8 p-3">
                    Copyright &copy; {{ site_title }}  {{ year }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        metaInfo() {
            let vm = this;
            return {
                title: Constants.site.title,
                titleTemplate: '%s | ' + vm.$router.currentRoute.name
            }
        },
        data() {
            let vm = this;
            return {
                share_url: ENV.SHARE_URL,
                site_title: Constants.site.title,
                year: General.getYear()
            }
        }
    }
</script>