<template>
    <div>
        <h3 class="fw-3" v-text="user.username"></h3>

        <form v-if="canUpdate" method="POST" enctype="multipart/form-data">

            <image-upload @loaded="onLoad"></image-upload>


            <!--<input id="upload" name="avatar" accept="image/*" @change="onChange" type="file">-->
            <!--<a href="" id="upload_link">-->
                <!--<i class="fa fa-pencil" style="font-size: 24px; color: black"></i>-->
            <!--</a>-->
        </form>



        <!--Bind de avatar naar wat de avatar is-->
        <img :src="avatar" class="rounded-circle" width="100" height="100">
    </div>
</template>

<script>

    import ImageUpload from './ImageUpload.vue';

    export default {

        props:  ['user'],

        components: { ImageUpload },

        data() {
            return {
                avatar: this.user.avatar_path
            };
        },

        computed: {
            canUpdate() {
                return this.authorize(user => user.id === this.user.id)
            }
        },

        methods: {
            onLoad(avatar) {
                this.avatar = avatar.src;

                this.persist(avatar.file);
            },

            persist(bestand) {
                let data = new FormData();

                data.append('avatar', bestand);

                axios.post(`/gebruikers/${this.user.username}/avatar`, data).then(() => flash('Foto bewerkt!'));
            }
        }
    }
</script>