<script setup>
defineProps({
    maxLength: {
        type: Number,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
});
</script>
<template>
    <div class="fetchedTags">
        <div class="wrap">
            <div
                class="inline-tag"
                :class="{ empty: !$props.item.value5 }"
                :title="$props.item.tag5 + ': ' + $props.item.value5"
            >
                {{ $props.item.value5 }}
            </div>
            <div
                class="inline-tag"
                :class="{ empty: !$props.item.tag6 }"
                :title="$props.item.tag6 + ': ' + $props.item.value6"
            >
                {{ $props.item.value6 }}
            </div>

            <div
                class="inline-tag"
                :class="{ empty: !$props.item.value7 }"
                :title="$props.item.tag7 + ': ' + $props.item.value7"
            >
                {{ $props.item.value7 }}
            </div>
            <div
                class="inline-tag"
                :class="{ empty: !$props.item.value8 }"
                :title="$props.item.tag8 + ': ' + $props.item.value8"
            >
                {{ $props.item.value8 }}
            </div>
            <div
                class="inline-tag"
                :class="{ empty: !$props.item.value9 }"
                :title="$props.item.tag9 + ': ' + $props.item.value9"
            >
                {{ $props.item.value9 }}
            </div>
            <div
                class="inline-tag"
                :class="{ empty: !$props.item.value10 }"
                :title="$props.item.tag10 + ': ' + $props.item.value10"
            >
                {{ $props.item.value10 }}
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.fetchedTags {
    align-items: center;
    .wrap {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
    }

    .inline-tag {
        height: 1rem;
        margin: 0.05rem;
        color: $secondary;
        text-align: center;
        font-size: smaller;
        padding: 1px;
        flex: 1;
        border: 1px solid $color-spacer;
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 4rem;
        max-width: 4rem;
    }

    .empty {
        border: 1px solid $color-spacer-light;
    }
}
</style>
