<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>Featuretype</translate> </small>
        </div>
        <div class="w-100">
          <input
            @keyup="featureTypeChanged"
            class="form-control"
            type="text"
            :value="featureType"
          />
        </div>
        <div v-if="!featureType" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a Featuretype</translate
            ></small
          >
        </div>
      </div>
      <div class="flex-column mt-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>SortBy</translate> </small>
        </div>
        <div class="w-100">
          <input
            @keyup="sortByChanged"
            class="form-control"
            type="text"
            :value="sortBy"
          />
        </div>
        <div v-if="!sortBy" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter SortBy</translate
            ></small
          >
        </div>
      </div>
    </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>LOS</translate> </small>
        </div>
        <div class="w-100">
          <select @keyup="LOSChanged" class="form-control">
            <option :value="{ LOS: 1 }">1</option>
            <option :value="{ LOS: 2 }">2</option>
            <option :value="{ LOS: 3 }">3</option>
          </select>
        </div>
        <div v-if="!LOS" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a level of service</translate
            ></small
          >
        </div>
      </div>
      <div class="flex-column mt-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>Depth</translate> </small>
        </div>
        <div class="d-flex flex-row">
          <input
            @keyup="depthChanged"
            @input="depthChanged"
            class="form-control"
            type="number"
            :value="depth"
          />
          <div class="ml-2 my-auto">cm</div>
        </div>
        <div v-if="!depth" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a depth</translate
            ></small
          >
        </div>
      </div>
    </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>MinWidth</translate> </small>
        </div>
        <div class="d-flex flex-row">
          <input
            @keyup="minWidthChanged"
            @input="minWidthChanged"
            class="form-control"
            type="number"
            :value="minWidth"
          />
          <div class="ml-2 my-auto">&nbsp;m</div>
        </div>
        <div v-if="!minWidth" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a minimum width</translate
            ></small
          >
        </div>
      </div>
      <div class="flex-column mt-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>MaxWidth</translate> </small>
        </div>
        <div class="d-flex flex-row">
          <input
            @keyup="maxWidthChanged"
            @input="maxWidthChanged"
            class="form-control"
            type="number"
            :value="maxWidth"
          />
          <div class="ml-2 my-auto">&nbsp;m</div>
        </div>
        <div v-if="!maxWidth" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a maximum width</translate
            ></small
          >
        </div>
      </div>
    </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>Source orgranization</translate>
          </small>
        </div>
        <div class="w-100">
          <input
            @keyup="sourceOrganizationChanged"
            class="form-control"
            type="text"
            :value="sourceOrganization"
          />
        </div>
        <div v-if="!sourceOrganization" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a source orgranization</translate
            ></small
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "fairwaydimensions",
  props: [
    "url",
    "featureType",
    "sortBy",
    "depth",
    "LOS",
    "minWidth",
    "maxWidth",
    "sourceOrganization"
  ],
  methods: {
    urlChanged(e) {
      this.$emit("urlChanged", e.target.value);
    },
    featureTypeChanged(e) {
      this.$emit("featureTypeChanged", e.target.value);
    },
    sortByChanged(e) {
      this.$emit("sortByChanged", e.target.value);
    },
    depthChanged(e) {
      this.$emit("depthChanged", e.target.value * 1);
    },
    LOSChanged(e) {
      this.$emit("LOSChanged", e.target.value * 1);
    },
    minWidthChanged(e) {
      this.$emit("minWidthChanged", e.target.value * 1);
    },
    maxWidthChanged(e) {
      this.$emit("maxWidthChanged", e.target.value * 1);
    },
    sourceOrganizationChanged(e) {
      this.$emit("sourceOrganizationChanged", e.target.value);
    }
  }
};
</script>

<style></style>