<script lang="ts" setup>
import { IBand } from '~/models/band';
import icon from '~/components/icon.vue';
	const {data} = await useApiFetch("/bands/all")
	const bands = data as Ref<IBand[]>
	const hider = (id: number) => (e) => {
		bands.value.splice(bands.value.findIndex(a => a._id == id), 1)
		useApiFetch("/user/hide", {
			body: {
				authors: [],
				bands: [id]
			},
		 method: "post"
		})
	}
</script>
<template>
	<a-list :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 7 }" v-model:data-source="bands">
    <template #renderItem="{ item } ">
      <a-list-item>
				<a-row :gutter="[10, 10]">
					<a-col>
						<NuxtLink :to="`/band/${item._id}`">
							{{ item.name }}
						</NuxtLink>
					</a-col>
					<a-col>
						<a @click="hider(item._id)">
						<icon :istyle="'regular'" name="eye-slash" :size="12"/>
					</a>
					</a-col>
				</a-row>
      </a-list-item>
    </template>
  </a-list>
</template>