<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>
    import UploadableImage from "../../components/UploadableImage";

    export default {
        name: 'Profile',
        components: {
            UploadableImage
        },
        data: function () {
            return {
                loading: true,
                user: null,
            }
        },
        mounted() {
            axios.get('/api/users/' + this.$route.params.id)
                .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>
