<template>
  <div>
    <h1>Letenka</h1>

    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Vyhledejte si let</h5>

        <div class="form-check">
          <input v-model="typLetu" value="Z" class="form-check-input" type="radio" name="typLetu" id="typLetu1" checked>
          <label class="form-check-label" for="typLetu1">
            Zpáteční
          </label>
        </div>
        <div class="form-check">
          <input v-model="typLetu" value="J" class="form-check-input" type="radio" name="typLetu" id="typLetu2">
          <label class="form-check-label" for="typLetu2">
            Jednosměrná
          </label>
        </div>

        <label for="letisteZ" class="form-label">Odkud</label>
        <select v-model="letisteZ" id="letisteZ" class="form-select">
          <option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">
            {{ obj.text }}
          </option>
        </select>

        <label for="letisteKam" class="form-label">Kam</label>
        <select v-model="letisteKam" id="letisteKam" class="form-select">
          <option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">
            {{ obj.text }}
          </option>
        </select>

        <button v-on:click="pocetOsob -= 1" class="btn btn-outline-primary">-</button>
        {{ pocetOsob }}
        <button v-on:click="pocetOsob += 1" class="btn btn-outline-primary">+</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      letisteZ: "",
      letisteKam: "",
      letisteSeznam: [
        {value: "PRG", text: "Prague - Letiště Václava Havla"},
        {value: "PAR", text: "Paris"},
        {value: "DWC", text: "Dubai, AL Mohamed"},
      ],
      typLetu: "Z",
      pocetOsob: 0,
    };
  },
};
</script>

<style>
</style>
