<template>
  <div>
    <div class="d-flex px-2">
      <div class="flex-column w-100">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>URL</translate> </small>
        </div>
        <div class="w-100">
          <input
            @input="urlChanged"
            class="url form-control form-control-sm"
            type="url"
            :value="url"
          />
        </div>
      </div>
    </div>
    <div v-if="!url" class="d-flex px-2">
      <small
        ><translate class="text-danger">Please enter a URL</translate></small
      >
    </div>
  </div>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
export default {
  name: "gaugemeasurement",
  props: ["url"],
  methods: {
    urlChanged(e) {
      this.$emit("urlChanged", e.target.value);
    }
  }
};
</script>

<style></style>