<template>
<div>
	<div v-for="flow_item in flow_items" :key="flow_item.id">
		<div v-if="flow_item.type == 'cards'">
			<Card v-for='product in flow_item.items' />
		</div>
		<Selection v-else-if="flow_item.type == 'selection'"/>
	</div>
</div>
</template>

export default {
	computed: {
		flow_items(){
			let result = []

			let products_chunk_1 = []
			let products_chunk_2 = []

			for (let i = 0; i < this.products.length; i++) {
				
				if (this.products.length/2 >= i) {
					products_chunk_1.push(this.products[i])
				} else {
					products_chunk_2.push(this.products[i])
				}
			}

			result.push({
				id: 'flow-item-0',
				type: 'cards',
				items: products_chunk_1
			})

			result.push({
				id: 'flow-item-1',
				type: 'selection'
			})

			result.push({
				id: 'flow-item-2',
				type: 'cards',
				items: products_chunk_2
			})

			return result
		}
	}
}