<script>
  import CardItem from "./cardItem.svelte";
  import { getContext } from "svelte";

  export let startIndex;
  export let incrementer;
  export let startPadding;
  export let dataLength;
  export let vizStartIndex;
  export let parsedGridConfig;
  export let visualUtils;

   let cardItemsIterator = [],
    cardLayout = getContext("cardLayout");

  for (let i = 0; i < incrementer; i++) {
    cardItemsIterator.push(i);
  }
</script>
<!-- (startIndex * incrementer) moves the reference to the first item of the row 
     adding cardIndexto it  moves the reference to the next item in the row
     finally adding vizStartIndex moves the reference to the correct card index
-->
<div class="fg-card-wrapper" style="padding-left:{startPadding}px;">
  {#each cardItemsIterator as cardIndex}
    {#if (((startIndex * incrementer) + cardIndex) + vizStartIndex) < dataLength}
      <CardItem
        {parsedGridConfig}
        {visualUtils}
        carItemIndex={(((startIndex * incrementer) + cardIndex) + vizStartIndex)}
        orderIndex={cardIndex} />
    {/if}
  {/each}
</div>
