<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">
      Format
      <select class="ascii-input" :value="flags.format"
        @change="set('format', $event.target.value)">
        <option value="">default</option>
        <option>ansi</option><option>utf8</option><option>html</option>
      </select>
    </label>
    <label class="ascii-label">
      Dither
      <input class="ascii-input" type="text" :value="flags.dither"
        @input="set('dither', $event.target.value)" placeholder="default" />
    </label>
    <label class="ascii-label col-span-2">
      Gamma
      <input class="ascii-input" type="number" min="0.1" step="0.1" :value="flags.gamma"
        @input="set('gamma', $event.target.value)" placeholder="1.0" />
    </label>
  </div>
</template>
