<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {useFeeds} from '../stores/useFeeds';

const feeds = useFeeds();
const country = ref('DE');
const url = ref('');

onMounted(() => feeds.fetch());

async function add() {
  if (!url.value.trim()) return;
  await feeds.add(country.value, url.value.trim());
  url.value = '';
}
</script>
<template>
  <div class="bg-white rounded p-4 shadow space-y-2">
    <h2 class="font-semibold text-lg">Feeds verwalten</h2>

    <div class="flex gap-2">
      <select v-model="country" class="border rounded p-1 flex-1">
        <option>DE</option>
        <option>EU</option>
      </select>
      <input v-model="url" placeholder="https://…" class="border rounded p-1 flex-[3]"/>
      <button @click="add" class="bg-green-600 text-white px-3 rounded">+</button>
    </div>

    <ul class="list-disc pl-5">
      <li v-for="(f, index) in feeds.list" :key="index" class="flex justify-between items-center">
        <span>{{ f.country }} — {{ f.url }}</span>
        <button @click="feeds.remove(f.url)" class="text-red-600">✕</button>
      </li>
    </ul>
  </div>
</template>
