<div class="space-y-4">
	<div class="rounded-2xl border border-border bg-card p-6 shadow-sm">
		<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
			<div class="max-w-2xl">
				<div class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-300">
					<i data-lucide="calendar-range" class="h-3.5 w-3.5"></i>
					<?= lang('accounting_periods') ?>
				</div>
				<h3 class="mt-3 text-2xl font-semibold tracking-tight text-foreground"><?= lang('accounting_periods') ?></h3>
				<p class="mt-2 text-sm leading-6 text-muted-foreground"><?= lang('accounting_periods_intro') ?></p>
			</div>
		</div>
	</div>

	<div class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
		<div class="overflow-x-auto">
			<table class="min-w-full text-sm">
				<thead class="bg-muted/40">
					<tr>
						<th class="px-4 py-3 text-left"><?= lang('name') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('start_date') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('end_date') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('status') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('notes') ?></th>
						<th class="px-4 py-3 text-right"><?= lang('action') ?></th>
					</tr>
				</thead>
				<tbody class="divide-y divide-border">
					<?php if (!empty($periods)): foreach ($periods as $period): ?>
						<tr>
							<td class="px-4 py-3 font-medium text-foreground"><?= html_escape($period->name) ?></td>
							<td class="px-4 py-3 text-muted-foreground"><?= display_date($period->start_date) ?></td>
							<td class="px-4 py-3 text-muted-foreground"><?= display_date($period->end_date) ?></td>
							<td class="px-4 py-3"><?= finance_accounting_period_label($period->status) ?></td>
							<td class="px-4 py-3 text-muted-foreground"><?= html_escape($period->notes) ?></td>
							<td class="px-4 py-3 text-right">
								<div class="inline-flex items-center gap-2">
									<?= btn_modal(
										'admin/accounting/new_accounting_period/' . $period->period_id,
										lang('edit'),
										lang('edit') . ' ' . lang('accounting_period'),
										'lg',
										'pencil',
										array('class' => 'inline-flex items-center gap-2 rounded-lg border border-border bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800')
									); ?>
									<?php if ($period->status === 'open'): ?>
										<a class="inline-flex items-center rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-700 transition hover:bg-amber-100 dark:border-amber-900/40 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/30" href="<?= base_url('admin/accounting/toggle_accounting_period/' . $period->period_id . '/closed') ?>"><?= lang('close') ?></a>
									<?php else: ?>
										<a class="inline-flex items-center rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/30" href="<?= base_url('admin/accounting/toggle_accounting_period/' . $period->period_id . '/open') ?>"><?= lang('open') ?></a>
									<?php endif; ?>
								</div>
							</td>
						</tr>
					<?php endforeach; else: ?>
						<tr><td colspan="6" class="px-4 py-8 text-center text-muted-foreground"><?= lang('nothing_to_display') ?></td></tr>
					<?php endif; ?>
				</tbody>
			</table>
		</div>
	</div>
</div>
