<template>
<slot v-if="isFetching || isError" :renderer="indicatorsRenderer" name="indicators">
    <RenderFunction :renderer="indicatorsRenderer" />
</slot>
<select
    v-if="!isFetching && isSuccess && data !== undefined" v-model="modelValue"
    class="form-select form-control" v-bind="$attrs">
    <option v-for="forum in data" :key="forum.fid" :value="forum.fid">
        {{ forum.name }}
    </option>
</select>
</template>

<script setup lang="tsx">
defineOptions({ inheritAttrs: false });
defineSlots<{ indicators: (props: { renderer: VNode }) => unknown }>();
const modelValue = defineModel<Fid>();

const { data, error, isFetching, isError, isSuccess } = useApiForums();
const indicatorsRenderer = computed(() => (<>
    {isFetching.value && <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>}
    {isError.value && <span title={error.value?.message} class="text-danger fw-bold">Error</span>}
</>));
</script>

<style scoped>
.spinner-border {
    height: 1.5rem;
    width: 1.5rem;
}
</style>
