<template>
  <div>
    <div class="d-flex flex-row">
      <div class="flex-column mt-3 mr-3 w-100">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>URL</translate> </small>
        </div>
        <div class="w-100">
          <input
            @keyup="urlChanged"
            class="form-control"
            type="url"
            :value="url"
          />
        </div>
      </div>
    </div>
    <div v-if="!url" class="d-flex flex-row">
      <small
        ><translate class="text-danger">Please enter a URL</translate></small
      >
    </div>
    <div class="d-flex flex-row">
      <div class="flex-column mt-3 mr-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>Username</translate> </small>
        </div>
        <div class="w-100">
          <input
            @keyup="usernameChanged"
            class="form-control"
            type="text"
            :value="username"
          />
        </div>
        <div v-if="!username" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a Username</translate
            ></small
          >
        </div>
      </div>
      <div class="flex-column mt-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>Password</translate> </small>
        </div>
        <div class="w-100 d-flex flex-row">
          <input
            @keyup="passwordChanged"
            class="form-control"
            :type="showPassword"
            :value="password"
          />
          <span
            class="input-group-text ml-2"
            @click="passwordVisible = !passwordVisible"
          >
            <font-awesome-icon
              :icon="passwordVisible ? 'eye-slash' : 'eye'"
            ></font-awesome-icon>
          </span>
        </div>
        <div v-if="!password" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a Password</translate
            ></small
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "distancemarksvirtual",
  props: ["url", "username", "password"],
  data() {
    return {
      passwordVisible: false
    };
  },
  computed: {
    showPassword() {
      if (this.passwordVisible) return "text";
      return "password";
    }
  },
  methods: {
    urlChanged(e) {
      this.$emit("urlChanged", e.target.value);
    },
    usernameChanged(e) {
      this.$emit("usernameChanged", e.target.value);
    },
    passwordChanged(e) {
      this.$emit("passwordChanged", e.target.value);
    }
  }
};
</script>

<style></style>