﻿<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.about.title)
const description = ref(props.creator.about.description)

const client = useClient()
const save = async () => {
  try {
    await client.post(
        `/api/creators/${props.creator.id}/about`,
        {
          "title": title.value || null,
          "description": description.value || null
        })

    props.creator.about.title = title
    props.creator.about.description = description

    emits('closeRequested')
  } catch (error) {
    console.error(error)
  }
}

const cancel = () => {
  emits('closeRequested')
}

</script>

<template>
  <div class="pb-5 text-2xl">About</div>

  <div class="flex flex-row align-center">
    <v-text-field
        variant="outlined"
        v-model="title"
        label="Titre"
        outlined
    ></v-text-field>
  </div>


  <div class="flex flex-row align-center">
    <v-text-field
        variant="outlined"
        v-model="description"
        label="Description"
        outlined
    ></v-text-field>
  </div>

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