---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { people } from '@shared/lib/people'
import Avatar from '@ui/Avatar.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Pagination from '@ui/Pagination.astro'
import HeaderActionsUsers from '@shared/components/layout/HeaderActionsUsers.astro'

const users = people.slice(0, 18)
---

<DefaultLayout title="Users list" pageHeader="Users" description="1-18 of 413 people" pageMenu="extra.users">
  <HeaderActionsUsers slot="page-header-actions" />
  <div class="row row-cards">
    {
      users.map((person, idx) => {
        const index = idx + 1
        return (
          <div class="col-md-6 col-lg-3">
            <Card>
              <CardBody class="p-4 text-center">
                <Avatar size="xl" person={person} class="mb-3" />
                <h2 class="m-0 mb-1">
                  <a href="#">{person.full_name}</a>
                </h2>
                <div class="text-secondary">{person.job_title}</div>

                <div class="mt-3">{index === 1 ? <span class="badge bg-purple-lt">Owner</span> : index < 5 ? <span class="badge bg-green-lt">Admin</span> : null}</div>
              </CardBody>
              <div class="d-flex">
                <a href="#" class="card-btn">
                  <Icon name="mail" color="muted" class="me-2" /> Email
                </a>
                <a href="#" class="card-btn">
                  <Icon name="phone" color="muted" class="me-2" /> Call
                </a>
              </div>
            </Card>
          </div>
        )
      })
    }
  </div>

  <div class="d-flex mt-4">
    <Pagination count={5} activeItem={3} class="ms-auto" />
  </div>
</DefaultLayout>