---
// Port of preview/pages/flags.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import flags from '@data/flags.json';

// Liquid: {% for icon in (0..20) %}<div></div>{% endfor %} — 21 filler divs
const fillers = Array.from({ length: 21 });
---

<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
	<div class="card">
		<div class="card-header">
			<div class="card-title">List of all flags</div>
		</div>
		<div class="card-body p-0">
			<div class="demo-icons-list-wrap">
				<div class="demo-icons-list">
					{
						flags.map((country) => (
							<span
								class="demo-icons-list-item"
								title={country.name}
								data-bs-toggle="tooltip"
								data-bs-placement="top"
							>
								<span class={`flag flag-country-${country.flag.toLowerCase()}`} />
							</span>
						))
					}
					{fillers.map(() => <div></div>)}
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>