<template>
    <div>
        <div class="relative">
            <img
                class="cover"
                :src="user.attributes.cover_image.data.attributes.path"
                :alt="user.attributes.name"/>
        </div>
        <h1>{{ user.attributes.name }}</h1>
    </div>
</template>

<script>

export default {
    name: 'Profile',
    data: function () {
        return {
            loading: true,
            user: null,
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/users/' + this.$route.params.id) // eslint-disable-line no-undef-init
            .then(response => {
                this.user = response.data.data
                this.loading = false
            })
            .catch(errorRes => {
                this.loading = false
                if (errorRes.response.status === 404) {
                    this.$router.push('/user')
                }
            })
    },
}
</script>
