<template lang="pug">
section.container
  .message
    h1.title
      | {{ error.statusCode }}
    h2.info
      | {{ error.message }}
    nuxt-link(to='/', v-if='error.statusCode === 404')
      .button
        | 返回首页
</template>

<script>
export default {
  layout: 'errorTheme',
  props: {
    error: {
      type: Object,
      default: () => {
        return {
          statusCode: 500,
          message: '未知错误，请稍后再试'
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  padding 20px

.message
  max-width 400px
  background-color #fff
  padding 20px
  box-shadow 0 1px 3px rgba(0, 0, 0, 0.13)
  margin auto

.title
  margin-top 15px
  font-size 5em

.info
  font-weight 300
  color #9aabb1
  margin 0

.button
  display block
  padding 10px
  margin 80px auto 10px auto
  text-align center
</style>
