<template>
  <form :action="urlAction">
    <div>
      Select skin type:
      <select v-model="skinType" required>
        <option disabled value="">Skin Type:</option>
        <option value="0">I (Pale)</option>
        <option value="1">II (Fair)</option>
        <option value="2">III (Light Brown)</option>
        <option value="3">IV (Olive Brown)</option>
      </select>
    </div>

    <div>
      Location: <input type="number" v-model="lat" step="any" required /><input
        type="number"
        v-model="lon"
        step="any"
        required
      />
    </div>

    <button type="submit">Go</button>
  </form>
</template>

<script>
export default {
  name: "StartPage",

  data() {
    return {
      skinType: "",
      lat: "",
      lon: "",
    };
  },

  computed: {
    urlAction() {
      return "/" + this.skinType + "/" + +this.lat + "/" + this.lon + "/";
    },
  },
};
</script>
