<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>
