<script setup lang="ts">
const props = defineProps<{
  categoryName: string
  links: string[]
  errors: string[]
  visibleLinkCount: number
  remainingLinkCount: number
  onLinkInput: (index: number, value: string) => void
  onAddLinkField: () => void
  onRemoveLinkField: (index: number) => void
}>()
</script>

<template>
  <section class="home-nomination-pane">
    <header class="home-vote-picker__category-header">
      <div>
        <h4>{{ props.categoryName }}</h4>
      </div>
    </header>

    <div class="home-nomination-pane__fields">
      <label v-for="(_, index) in props.links.slice(0, props.visibleLinkCount)" :key="index" class="home-nomination-field">
        <span class="home-nomination-field__header">
          <span>{{ index === 0 ? 'Link 1' : `Link ${index + 1} optional` }}</span>
          <button
            v-if="index > 0"
            type="button"
            class="home-nomination-field__remove"
            @click.prevent="props.onRemoveLinkField(index)"
          >
            Entfernen
          </button>
        </span>
        <input
          :value="props.links[index]"
          type="url"
          maxlength="300"
          placeholder="https://plattform.de/dein-kanal"
          :aria-invalid="Boolean(props.errors[index])"
          @input="props.onLinkInput(index, ($event.target as HTMLInputElement).value)"
        />
        <small v-if="props.errors[index]" class="home-nomination-field__error">{{ props.errors[index] }}</small>
        <small v-else>Offizieller Kanal- oder Stream-Link.</small>
      </label>
    </div>

    <button
      v-if="props.remainingLinkCount > 0"
      type="button"
      class="home-nomination-pane__add-link"
      @click="props.onAddLinkField"
    >
      <span>+ Weiteren Link hinzufügen</span>
      <small>Noch {{ props.remainingLinkCount }} möglich</small>
    </button>

  </section>
</template>
