<template>
  <div id="app">
    <h1>Letenka</h1>
    <div class="wrapper"></div>
    <div class="col">
      <h2>Parametry letu</h2>
      <select v-model="travelType" >
        <option value="" disabled>Vyberte jednu požnost</option>
        <option v-for="(option, index) in travelTypes" :key="index" :value="option">
          {{option.text}}
        </option>
        
      </select>
    </div>
    <div class="col">
      <h2>Objednávka</h2>
      <p v-if="travelType">
        Typ cesty: 
        <span style="text-transform:lowercase">{{travelType.text}}
          </span> 
      </p>
    </div>

    
  </div>
</template>

<script>

export default {
  name: "App",
  data: function(){
    return {
      travelType: "",
      travelTypes: [
        { value: "R", text: "Zpáteční"},
        { value: "O", text: "Jednosměrná"},
      ]
    }
  }
}
</script>

<style>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
</style>
