<script>
  import { getContext } from "svelte"

  export let dataProvider
  export let noRowsMessage

  const { API, styleable, builderStore, Provider } = getContext("sdk")
  const component = getContext("component")
  const context = getContext("context")

  $: rows = dataProvider?.rows ?? []
  $: loaded = dataProvider?.loaded ?? false
</script>

<div use:styleable={$component.styles}>
  {#if rows.length > 0}
    {#if $component.children === 0 && $builderStore.inBuilder}
      <p><i class="ri-image-line" />Add some components to display.</p>
    {:else}
      {#each rows as row}
        <Provider data={row}>
          <slot />
        </Provider>
      {/each}
    {/if}
  {:else if loaded && noRowsMessage}
    <p><i class="ri-list-check-2" />{noRowsMessage}</p>
  {/if}
</div>

<style>
  p {
    margin: 0 var(--spacing-m);
    background-color: var(--grey-2);
    color: var(--grey-6);
    font-size: var(--font-size-s);
    padding: var(--spacing-l);
    border-radius: var(--border-radius-s);
    display: grid;
    place-items: center;
  }
  p i {
    margin-bottom: var(--spacing-m);
    font-size: 1.5rem;
    color: var(--grey-5);
  }
</style>
