<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  editData: Object,
  mode: String,
  userOption: Array,
});

const emit = defineEmits(["handle-data", "close-modal"]);

const visible = ref(true);

const form = ref({
  name: "",
  description: "",
});

const submit = () => {
  emit("handle-data", form.value);
};
</script>

<template>
  <v-card class="rounded-lg overflow-hidden">
    <!-- 타이틀 영역 -->
    <v-card-title
      class="text-white font-weight-bold text-h6"
      style="background-color: #1976d2"
    >
      Create Experiment
    </v-card-title>

    <v-card-text class="pa-6">
      <v-form @submit.prevent="submit">
        <div class="mb-5">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >Experiment Name</label
          >
          <v-text-field
            v-model="form.name"
            variant="outlined"
            dense
            hide-details
            required
          />
        </div>

        <div>
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >Description</label
          >
          <v-textarea
            v-model="form.description"
            variant="outlined"
            rows="3"
            dense
            hide-details
          />
        </div>
      </v-form>
    </v-card-text>

    <v-card-actions class="justify-end" style="padding: 16px 24px">
      <v-btn color="success" @click="submit">Save</v-btn>
      <v-btn text class="white--text" @click="$emit('close-modal')"
        >Close</v-btn
      >
    </v-card-actions>
  </v-card>
</template>
