<template>
  <div class="main-container">
    <div class="heading">
      <h1>
        Willkommen in der Adressverwaltung
      </h1>
    </div>
    <div class="content">
      <input v-model="input" type="text" placeholder="Suche...">
      <div v-for="adresses in filteredList()" :key="adresses" class="adresses">
        <p>{{ adresses }}</p>
      </div>
      <div v-if="input&&!filteredList().length" class="item error">
        <p>Nicht gefunden</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const input = ref('')
const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
function filteredList () {
  return adresses.filter(adresses =>
    adresses.toLowerCase().includes(input.value.toLowerCase())
  )
}
</script>

<style src="@/assets/main.css"></style>
