<div class="space-y-6">
	<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
		<div class="flex flex-wrap items-center justify-between gap-4">
			<div>
				<p class="text-xs uppercase tracking-wide text-slate-500"><?= lang('project') ?></p>
				<h2 class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($project_details->project_name) ?></h2>
				<p class="mt-2 text-sm text-slate-500"><?= mention_text($project_details->description) ?></p>
			</div>
			<div class="flex items-center gap-3">
				<span class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium <?= $status_badge ?>">
					<?= lang($status_key) ?>
				</span>
				<span class="inline-flex items-center rounded-full border border-slate-200 px-2.5 py-1 text-xs text-slate-500">
					<?= round($project_progress, 2) ?>%
				</span>
			</div>
		</div>
		<div class="mt-4 grid gap-4 md:grid-cols-3">
			<div class="rounded-xl border border-slate-200 dark:border-slate-800 p-4">
				<p class="text-xs uppercase text-slate-400"><?= lang('start_date') ?></p>
				<p class="mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->start_date) ?></p>
			</div>
			<div class="rounded-xl border border-slate-200 dark:border-slate-800 p-4">
				<p class="text-xs uppercase text-slate-400"><?= lang('end_date') ?></p>
				<p class="mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->end_date) ?></p>
				<p class="text-xs text-slate-500"><?= $TotalGone ?> <?= $lang ?></p>
			</div>
			<div class="rounded-xl border border-slate-200 dark:border-slate-800 p-4">
				<p class="text-xs uppercase text-slate-400"><?= lang('billing_type') ?></p>
				<p class="mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang($project_details->billing_type) ?></p>
			</div>
		</div>
	</div>

	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
		<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('tasks') ?></p>
			<p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= $total_task ?></p>
			<p class="text-sm text-slate-500"><?= $completed ?> <?= lang('completed') ?></p>
		</div>
		<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('project_hours') ?></p>
			<p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= $project_hours ?></p>
			<p class="text-sm text-slate-500"><?= lang('logged_hours') ?></p>
		</div>
		<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('expenses') ?></p>
			<p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= display_money($budget_spent, $currency->symbol) ?></p>
			<p class="text-sm text-slate-500"><?= lang('total') ?> <?= display_money($budget_total, $currency->symbol) ?></p>
		</div>
	</div>

	<div class="grid gap-6 xl:grid-cols-[1.2fr_1fr]">
		<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
			<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4"><?= lang('project_scope') ?></h3>
			<p class="text-sm text-slate-600 dark:text-slate-300">
				<?= !empty($project_details->description) ? nl2br(html_escape($project_details->description)) : lang('no_description') ?>
			</p>
			<div class="mt-4 flex flex-wrap gap-2">
				<?= get_tags($project_details->tags, true) ?>
			</div>
		</div>
		<div class="min-w-0 space-y-6">
			<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('at_a_glance') ?></p>
				<div class="mt-4 flex items-center gap-3">
					<div class="h-10 w-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-semibold">
						<?= strtoupper(mb_substr($name, 0, 1)) ?>
					</div>
					<div>
						<p class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($name) ?></p>
						<p class="text-xs text-slate-500"><?= lang('client') ?></p>
					</div>
				</div>
			</div>
			<div class="min-w-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('project_team') ?></p>
				<div class="mt-4 space-y-3">
					<?php if (!empty($participants)) { ?>
						<?php foreach ($participants as $member) { ?>
							<div class="flex items-center gap-3">
								<img src="<?= base_url() . $member->avatar ?>" class="h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900" alt="<?= html_escape($member->fullname) ?>">
								<div>
									<p class="text-sm font-medium text-slate-800 dark:text-slate-100"><?= html_escape($member->fullname) ?></p>
									<p class="text-xs text-slate-500"><?= $member->role_id == 1 ? lang('admin') : lang('staff') ?></p>
								</div>
							</div>
						<?php } ?>
					<?php } else { ?>
						<p class="text-sm text-slate-500"><?= lang('everyone') ?></p>
					<?php } ?>
				</div>
			</div>
		</div>
	</div>
</div>
