<script setup>
const props = defineProps({ flags: { type: Object, required: true } })
const emit = defineEmits(['update:flags'])

const set = (key, val) => emit('update:flags', { ...props.flags, [key]: val })
</script>

<template>
  <div class="grid grid-cols-2 gap-3">
    <label class="ascii-label">
      Width
      <input class="ascii-input" type="number" min="1" :value="flags.width"
        @input="set('width', $event.target.value)" placeholder="auto" />
    </label>
    <label class="ascii-label">
      Height
      <input class="ascii-input" type="number" min="1" :value="flags.height"
        @input="set('height', $event.target.value)" placeholder="auto" />
    </label>
    <label class="ascii-label">
      Background
      <select class="ascii-input" :value="flags.background"
        @change="set('background', $event.target.value)">
        <option value="">default</option>
        <option>light</option><option>dark</option>
      </select>
    </label>
    <label class="ascii-label">
      Chars
      <input class="ascii-input" type="text" :value="flags.chars"
        @input="set('chars', $event.target.value)" placeholder="e.g. .:-=+*#%@" />
    </label>
  </div>
</template>
