<template>
    <h1>Fej Frontend</h1>

    <input id="street" type="text" placeholder="street" v-model="street" />
    <button :onClick="onSubmit">Search</button>

    <ul>
        <li v-for="res in results">{{res.name}} ({{res.city}})</li>
    </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Street, Ivago } from '../api/ivago'

export default defineComponent({
    name: 'HelloWorld',
    data() {
        return {
            street: "",
            results: [] as Street[],
        }
    },
    methods: {
        onSubmit() {
            new Ivago(import.meta.env.VITE_ENDPOINT as string).search(this.$data.street)
                .then(res => {
                    this.$data.results = res;
                });
        }
    }
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
