<template>
  <form @submit.prevent="submit" class="column" style="gap:10px;">
    <div class="row">
      <label class="toggle" style="flex:1;">
        <div class="muted" style="font-size:12px;">Usuario</div>
        <input v-model="state.username" :readonly="isEdit" placeholder="usuario" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
      </label>
      <label class="toggle" style="flex:1;">
        <div class="muted" style="font-size:12px;">Contraseña</div>
        <input v-model="state.password" placeholder="contraseña" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
      </label>
    </div>
    <div class="row">
      <label class="toggle" style="flex:1;">
        <div class="muted" style="font-size:12px;">VLAN</div>
        <input v-model="state.vlan" placeholder="VLAN" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
      </label>
      <label class="row toggle" style="gap:6px;">
        <input type="checkbox" v-model="state.disabled"/>
        Deshabilitado
      </label>
    </div>
    <div class="modal-footer">
      <button type="button" class="icon-btn" @click="$emit('cancel')">Cancelar</button>
      <button type="submit" class="icon-btn">Guardar</button>
    </div>
  </form>
</template>

<script setup>
import { reactive, watch, computed } from 'vue';

const props = defineProps({
  modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
  mode: { type: String, default: 'create' } // 'create' | 'edit' | 'guest'
});
const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);

const state = reactive({ username:'', password:'', vlan:'', disabled:false });
const isEdit = computed(() => props.mode === 'edit');

watch(() => props.modelValue, (v) => {
  Object.assign(state, v || {});
}, { immediate: true, deep: true });

function submit() {
  emit('submit', { ...state });
}
</script>

