<template>
    <div>
        <div class="relative">
            <UploadableImage
                :image-width=1500
                :image-height=500
                location="cover"
                :image="authUser.data.attributes.cover_image"
                :author="authUser"
                :id="authUser.data.user_id"
                :model="authUser.data.type"
                classes=""
                :alt="authUser.data.attributes.name"/>
            <div class="absolute w-64 bottom-0">
                <UploadableImage
                    :image-width=750
                    :image-height=750
                    location="profile"
                    :image="authUser.data.attributes.profile_image"
                    :author="authUser"
                    :id="authUser.data.user_id"
                    :model="authUser.data.type"
                    classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
                    :alt="authUser.data.attributes.name"/>
                <h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadableImage from '../../components/UploadableImage'

export default {
    name: 'Profil',
    components: {
        UploadableImage
    },
    computed: {
        ...mapGetters({
            authUser: 'authUser',
        })
    },
}
</script>
