---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Colorpicker from '@ui/Colorpicker.astro'
import site from '@data/site.json'
import DocsLink from '@ui/DocsLink.astro'

const colors = Object.values(site.colors) as { hex: string; title: string }[]
---

<DefaultLayout title="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
  <DocsLink slot="page-header-actions" path="/ui/plugins/color-picker" />
  <Card>
    <CardBody>
      <CardTitle>Basic</CardTitle>
      <CardSubtitle>Click a swatch to open the picker and choose any color.</CardSubtitle>
      <div class="row g-3">
        {
          colors.map((color, index) => (
            <div class="col-2">
              <div>
                <Colorpicker value={color.hex} id={`${index + 1}`} format="hex" ariaLabel={`${color.title} color value`} />
              </div>
            </div>
          ))
        }
      </div>
    </CardBody>
  </Card>
</DefaultLayout>