---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import MapVector from '@components/demo/MapVector.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['vector-map']}>
  <DocsLink slot="page-header-actions" path="/ui/plugins/vector-map" />
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>World map</CardTitle>
          <MapVector mapId="world" legend />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Map with markers</CardTitle>
          <MapVector mapId="world-markers" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Map with markers and lines</CardTitle>
          <MapVector mapId="world-lines" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Map with a color scale</CardTitle>
          <MapVector mapId="world-colors" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Map with selection</CardTitle>
          <MapVector mapId="world-select" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Map with zoom</CardTitle>
          <MapVector mapId="world-zoom" />
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>