﻿<script setup>
import { ref } from 'vue';
import { useClient } from '@/plugins/api.js';

const props = defineProps({
  creator: {
    required: true
  }
});

const emits = defineEmits(['closeRequested']);

const title = ref(props.creator.title);

const client = useClient();

const save = async () => {
  try {
    await client.post(
        `/api/creators/${props.creator.id}/title`,
        {
          title: title.value
        }
    );

    props.creator.title = title.value;
    emits('closeRequested');
  } catch (error) {
    console.error('Error saving title:', error);
  }
};

const cancel = () => {
  emits('closeRequested');
};
</script>

<template>
  <div class="pb-5 text-2xl">Modifier le Titre</div>
  <div class="flex flex-col space-y-4">
    <v-text-field
        variant="outlined"
        v-model="title"
        label="Titre"
        outlined
    ></v-text-field>

    <div class="flex justify-end space-x-4">
      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
    </div>
  </div>
</template>

<style scoped>
.flex {
  display: flex;
}
.space-y-4 > * + * {
  margin-top: 1rem;
}
</style>
