<template>
  <form data-abide @submit.prevent="$emit('connect')">
    <div class="grid-x">
      <div class="cell">
        <label>
          Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)">
        </label>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell">
        <label>
          Port <input type="text" :value="modelValue.port" required @input="emit('port', $event.target.value)">
        </label>
      </div>
    </div>
    <label>
      Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)">
    </label>
    <label>
      Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)">
    </label>
    <div class="grid-x">
      <div class="cell">
        <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)">
        <label :for="`tls-${uid}`">TLS enabled</label>
      </div>
    </div>
    <button class="button" type="submit">
      Connect
    </button>
  </form>
</template>

<script>
import dynamicModelObjectEmit from '../mixins/dynamicModelObjectEmit';

export default {
  mixins: [
    dynamicModelObjectEmit,
  ],

  emits: ['connect'],

  data () {
    return {
      uid: crypto.getRandomValues(new Uint8Array(1)),
    };
  },
};
</script>

<style lang="scss">
</style>
