<script setup>
import TextInput from '@/Components/TextInput.vue';
import Utils from '@/utils';
import { useForm } from '@inertiajs/vue3';

const props = defineProps({
    album: {
        type: Object,
        required: true,
    }
})

const form = useForm({
    name: ""
});

const emits = defineEmits(["close"]);

const submit = () => {
    form.post(route("album.update", props.album.uuid) , {
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-Token": document.querySelector('input[name=_token]').value,
        },
    });
    emits("close");
}
</script>

<template>
    <div class="text-left text-black shadow-md shadow-gray-500 rounded-lg z-40
    bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72 pointer-events-none">
        <form>
            <TextInput :placeholder="'Changer le nom de la album'" :class="'w-full'" v-model="form.name"/>
            <div class="w-full flex mt-3">
                <button @click.prevent="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Changer</button>
            </div>
        </form>
    </div>
</template>