<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 v-if="false" class="flex-column mt-3 text-left">
        <div class="d-flex flex-row">
          <small class="text-muted mr-2"
            ><translate>Insecure</translate>
          </small>
        </div>
        <div class="d-flex flex-row">
          <toggle-button
            v-model="insecure"
            class="mt-2"
            :speed="100"
            :color="{
              checked: '#FF0000',
              unchecked: '#E9ECEF',
              disabled: '#CCCCCC'
            }"
            :labels="{
              checked: this.$options.on,
              unchecked: this.$options.off
            }"
            :width="60"
            :height="30"
          />
        </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>
</template>

<script>
export default {
  name: "bottleneckimport",
  props: ["url"],
  methods: {
    urlChanged(e) {
      this.$emit("urlChanged", e.target.value);
    }
  }
};
</script>

<style></style>