---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro'
import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro'
import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro'
import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro'
import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro'
import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro'
import DocsLink from '@ui/DocsLink.astro'

const cols = [1, 2, 3, 4]
---

<DefaultLayout title="Placeholder" pageMenu="base.placeholder" description="Placeholders mimic the shape of content that hasn't loaded yet.">
  <DocsLink slot="page-header-actions" path="/ui/components/placeholder" />

  <div class="row row-cards">
    {
      cols.map(() => (
        <div class="col-6 col-md-3">
          <PlaceholderCard1 />
        </div>
      ))
    }
    <div class="col-12 col-md-4">
      <div class="row row-cards">
        <div class="col-12">
          <PlaceholderCard3 />
        </div>
        <div class="col-12">
          <PlaceholderCard4 />
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="row row-cards">
        <div class="col-12">
          <PlaceholderCard1 />
        </div>
        <div class="col-12">
          <PlaceholderCard2 />
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="row row-cards">
        <div class="col-12">
          <PlaceholderCard5 />
        </div>
        <div class="col-12">
          <PlaceholderCard6 />
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>