<template lang="pug">
    .container
        nav
            slot
                span Eyas
        .main
            p
                i.fa.fa-exclamation-triangle(style="font-size: 100px")
        h2 {{code || 'Oops'}}, {{title || 'This Page Could Not Be Found!'}}
        div.info.mt20 {{msg || 'The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.'}}
        div.mt50.pt20.links
            a(@click.prevent="gotoBack") BACK NOW
            a.reverse(@click.prevent="gotoHome") HOME PAGE

        ul
            li(v-for="n in 10")


</template>

<script>
    export default {
        name: 'oc-error',

        props: {
            code: null,
            title: null,
            msg: null
        },

        methods: {
            gotoHome() {
                if(this.$route.query.redirect) {
                    window.location.href = decodeURIComponent(this.$route.query.redirect);
                }
                else {
                    window.location.href = '/'
                    // this.gotoBack();
                }
            },

            gotoBack() {
                if(this.$route.query.redirect) {
                    window.location.href = decodeURIComponent(this.$route.query.redirect);
                } else {
                    window.history.go(-1);
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .container
        background-image radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%)
        font-family initial
        position fixed
        top 0
        bottom 0
        left 0
        width 100%
        height 100%
        z-index 11
        overflow-y hidden
        display flex
        flex-direction column
        align-items center
        justify-content center
        color #fff
        font-size 14px
        nav
            position absolute
            left 15px 
            top 15px
            right 15px
            color #eee
            z-index 11
        >.main 
            display block
            width 100%
            position relative
            text-align center
        h2
            font-size 26px
            font-weight 600
            margin-top 30px
            text-align center
        .info
            text-align center
            margin-top 30px
            font-size 18px
            color #eee
            a 
                color #fff
    
    .links a
        padding 15px 40px
        background #fff 
        border-radius 25px
        font-size 12px
        transition all .3s
        margin 15px
        &.reverse
            background transparent
            color #eaeaea
            border 1px solid #eaeaea
            &:hover
                border-color #fff
                color #fff
        &:hover
            text-decoration none
            box-shadow 5px 13px 30px rgba(100, 100, 100, .2)
            
    li
        position absolute
        list-style none
        display block
        width 40px
        height 40px
        background-color rgba(255, 255, 255, 0.15)
        bottom -160px
        animation square 25s infinite
        transition-timing-function linear
        
        &:nth-child(1)
            left 10%
        &:nth-child(2)
            left 20%
            width 80px
            height 80px
            animation-delay 2s
            animation-duration 17s
        &:nth-child(3)
            left 25%
            animation-delay 4s
        &:nth-child(4)
            left 40%
            width 60px
            height 60px
            animation-duration 22s
            background-color rgba(255, 255, 255, 0.25)
        &:nth-child(5)
            left 70%
        &:nth-child(6)
            left 80%
            width 120px
            height 120px
            animation-delay 3s
            background-color rgba(255, 255, 255, 0.2)
        &:nth-child(7)
            left 32%
            width 160px
            height 160px
            animation-delay 7s
        &:nth-child(8)
            left 55%
            width 20px
            height 20px
            animation-delay 15s
            animation-duration 40s
        &:nth-child(9)
            left 25%
            width 10px
            height 10px
            animation-delay 2s
            animation-duration 40s
            background-color rgba(255, 255, 255, 0.3)
        &:nth-child(10)
            left 90%
            width 160px
            height 160px
            animation-delay 11s

    @keyframes square
        0%  
            transform translateY(0)
        100% 
            transform translateY(-700px) rotate(600deg)
</style>