---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
import DocsLink from '@ui/DocsLink.astro'

// 21 filler divs for flexbox layout.
const fillers = Array.from({ length: 21 })
---

<DefaultLayout title="Flags" pageMenu="addons.flags">
  <DocsLink slot="page-header-actions" path="/ui/plugins/flags" />
  <Card>
    <CardHeader>
      <CardTitle>List of all flags</CardTitle>
    </CardHeader>
    <CardBody class="p-0">
      <div class="demo-icons-list-wrap">
        <div class="demo-icons-list">
          {
            flags.map((country) => (
              <span class="demo-icons-list-item" title={country.name} data-bs-toggle="tooltip" data-bs-placement="top">
                <span class={`flag flag-country-${country.flag.toLowerCase()}`} />
              </span>
            ))
          }
          {fillers.map(() => <div />)}
        </div>
      </div>
    </CardBody>
  </Card>
</DefaultLayout>