<template>
  <GnModal
    :open="props.open"
    :title="t('settings.keyCreateTitle')"
    @update:open="emit('close')"
  >
    <div class="create-key-body">
      <GnInput
        v-model="name"
        :label="t('col.name')"
        :placeholder="t('settings.keyNamePlaceholder')"
        :disabled="props.creating"
        @keydown.enter="submit"
      />
    </div>

    <template #actions>
      <GnButton variant="secondary" @click="emit('close')" :disabled="props.creating">
        {{ t('common.cancel') }}
      </GnButton>
      <GnButton variant="primary" :loading="props.creating" @click="submit">
        {{ t('common.create') }}
      </GnButton>
    </template>
  </GnModal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { t } from '@/i18n/index.js'

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: min(320px, calc(100vw - 48px));
}
</style>