<template>
  <GnModal
    :open="props.open"
    title="Create API Key"
    @update:open="emit('close')"
  >
    <div class="create-key-body">
      <GnInput
        v-model="name"
        label="Name"
        placeholder="e.g. Smart Watch, Automation Script"
        :disabled="props.creating"
        @keydown.enter="submit"
      />
    </div>

    <template #actions>
      <GnButton variant="secondary" @click="emit('close')" :disabled="props.creating">
        Cancel
      </GnButton>
      <GnButton variant="primary" :loading="props.creating" @click="submit">
        Create
      </GnButton>
    </template>
  </GnModal>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  open: Boolean,
  creating: Boolean,
})

const emit = defineEmits(['close', 'submit'])

const name = ref('')

watch(() => props.open, (open) => {
  if (open) name.value = ''
})

function submit() {
  const trimmed = name.value.trim()
  if (!trimmed) return
  emit('submit', trimmed)
}
</script>

<style scoped lang="scss">
.create-key-body {
  min-width: 320px;
}
</style>