---
// Port of preview/pages/users.html (layout: default)
// Note: the Liquid template assigns `progress` and `online_counter` per person
// but never renders them — omitted here.
// Note: the avatar include passes `rounded=true`, which ui/avatar.html ignores
// (no such param) — omitted; Avatar.astro has no `rounded` prop.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Avatar from '@shared/components/ui/Avatar.astro';
import Icon from '@shared/components/Icon.astro';
import Pagination from '@shared/components/ui/Pagination.astro';
import people from '@data/people.json';

interface Person {
	full_name?: string;
	job_title?: string;
	photo?: string;
	[key: string]: unknown;
}

const users = (people as Person[]).slice(0, 18);
---

<DefaultLayout
	title="Users list"
	pageHeader="Users"
	actions="users"
	description="1-18 of 413 people"
	pageMenu="extra.users"
>
	<div class="row row-cards">
		{
			users.map((person, idx) => {
				const index = idx + 1;
				return (
					<div class="col-md-6 col-lg-3">
						<div class="card">
							<div class="card-body p-4 text-center">
								<Avatar size="xl" person={person} class="mb-3" />
								<h3 class="m-0 mb-1">
									<a href="#">{person.full_name}</a>
								</h3>
								<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>
							</div>
							<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>
						</div>
					</div>
				);
			})
		}
	</div>

	<div class="d-flex mt-4">
		<Pagination class="ms-auto" />
	</div>
</DefaultLayout>