---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import UsersList from '@shared/components/cards/UsersList.astro'
import UsersList2 from '@shared/components/cards/UsersList2.astro'
import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Lists" pageMenu="base.lists" description="Lists of users, contacts, and links — built from list-group items or a plain card body.">
  <DocsLink slot="page-header-actions" path="/ui/components/list-group" />

  <div class="row row-cards">
    <div class="col-md-6">
      <div class="row row-cards">
        <div class="col-12">
          <UsersList2 />
        </div>
        <div class="col-12">
          <UsersList offset={8} checkbox checkedIds={[2, 5, 8]} title="Contacts" />
        </div>
        <div class="col-12">
          <Card>
            <CardHeader title="Links and buttons" />
            <ListGroup flush>
              <ListGroupItem as="a" href="#" action active aria-current="true"> The current link item </ListGroupItem>
              <ListGroupItem as="a" href="#" action>A second link item</ListGroupItem>
              <ListGroupItem as="a" href="#" action>A third link item</ListGroupItem>
              <ListGroupItem as="a" href="#" action>A fourth link item</ListGroupItem>
              <ListGroupItem as="a" action disabled>A disabled link item</ListGroupItem>
            </ListGroup>
          </Card>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row row-cards">
        <div class="col-12">
          <UsersList hoverable />
        </div>
        <div class="col-12">
          <UsersListHeaders />
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>