{{gtag}}
<link rel="stylesheet" href="{{public}}svgMap.min.css">
<!--
<link rel="stylesheet" href="{{public}}bitfire-lite-day.css">
<link rel="stylesheet" href="{{public}}bitfire-lite-dark.css">
<link rel="stylesheet" href="{{assets}}common.css">
-->
<style>body:not(.theme-ready){visibility:hidden}</style>
<style>
	{{custom_css}}

	/* ============================================================
	 * Geo-block page — built on the BitFire Lite token system.
	 * Variables (--bg, --fg, --accent, --red, --green, etc.) are
	 * defined in bitfire-lite-day.css and flipped under
	 * `body.theme-dark` by bitfire-lite-dark.css.
	 * ============================================================ */

	#wpcontent { padding-left: 0 !important; }
	#wpbody-content { padding-bottom: 0; }
	.bf-man-content { width: 100%; margin: 0; }
	.bf-man-content > .lite-topbar {
		width: 100%;
		margin: 0 0 32px;
		padding: 0 32px;
	}

	/* Page shell */
	.bf-shell {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 32px 96px;
	}

	/* Sticky topbar — matches lite-topbar visual language */
	.bf-topbar {
		position: sticky; top: 0; z-index: 30;
		display: flex; align-items: center; gap: 16px;
		padding: 0 32px; height: 56px;
		background: oklch(from var(--bg-panel) l c h / 0.92);
		backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--border);
		margin-bottom: 32px;
	}
	.bf-topbar .brand-name {
		font-weight: 600; font-size: 14px; color: var(--fg);
		letter-spacing: -0.005em;
	}
	.bf-topbar .brand-product {
		font-family: var(--mono); font-size: 11px;
		color: var(--fg-dimmer); letter-spacing: 0.04em;
		padding-left: 10px; margin-left: 2px;
		border-left: 1px solid var(--border);
	}
	.bf-spacer { flex: 1; }
	.bf-count-pill {
		display: inline-flex; align-items: center; gap: 6px;
		font-family: var(--mono); font-size: 11px;
		padding: 4px 10px; border-radius: 999px;
		background: var(--bg-raised); border: 1px solid var(--border);
		color: var(--fg-dim);
	}
	.bf-count-pill .num { color: var(--fg); font-weight: 600; }

	/* Theme toggle (mirror of style guide / preview) */
	.theme-toggle {
		width: 32px; height: 32px;
		display: inline-flex; align-items: center; justify-content: center;
		background: var(--bg-raised);
		border: 1px solid var(--border);
		border-radius: 999px;
		color: var(--fg-dim); cursor: pointer; padding: 0;
		transition: color .15s, border-color .15s, background .15s;
	}
	.theme-toggle:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
	.theme-toggle svg { width: 15px; height: 15px; display: block; }
	.theme-toggle .icon-sun { display: none; }
	body.theme-dark .theme-toggle .icon-sun  { display: block; }
	body.theme-dark .theme-toggle .icon-moon { display: none; }

	/* Hero */
	.bf-hero {
		padding: 24px 0 32px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 40px;
	}
	.bf-eyebrow {
		font-family: var(--mono); font-size: 11px; color: var(--accent);
		letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
	}
	.bf-hero h1 {
		font-size: 32px; font-weight: 600; letter-spacing: -0.018em;
		line-height: 1.15; margin: 0 0 12px; color: var(--fg);
	}
	.bf-hero .lede {
		font-size: 13.5px; color: var(--fg-dim); line-height: 1.55;
		max-width: 64ch; margin: 0;
	}
	.bf-hero .lede strong { color: var(--fg); font-weight: 500; }

	/* Section block (replaces Bootstrap .card) */
	.bf-card {
		background: var(--bg-panel);
		border: 1px solid var(--border);
		border-radius: 6px;
		margin-top: 18px;
		overflow: hidden;
	}
	.bf-card-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 16px; flex-wrap: wrap;
		padding: 14px 18px;
		border-bottom: 1px solid var(--border);
		background: var(--bg-panel);
	}
	.bf-card-head .titles { min-width: 0; }
	.bf-card-head h2 {
		margin: 0; font-size: 14px; font-weight: 600;
		color: var(--fg); letter-spacing: -0.005em;
	}
	.bf-card-head .blurb {
		margin: 4px 0 0; font-size: 11.5px; color: var(--fg-dim);
		font-family: var(--sans); line-height: 1.45;
	}
	.bf-card-head .head-meta {
		font-family: var(--mono); font-size: 10.5px;
		color: var(--fg-dimmer); letter-spacing: 0.04em;
	}
	.bf-card-body { padding: 18px; }
	.bf-card-body.tight { padding: 0; }

	/* Master enable toggle (right side of mode-card head) */
	.geo-master {
		display: inline-flex; align-items: center; gap: 10px;
		font-size: 11.5px; color: var(--fg-dim);
		font-family: var(--sans);
		cursor: pointer; user-select: none;
	}
	.geo-master .label { font-weight: 500; }
	.geo-switch {
		--w: 32px; --h: 18px;
		position: relative; display: inline-block;
		width: var(--w); height: var(--h); flex-shrink: 0;
	}
	.geo-switch input {
		position: absolute; opacity: 0;
		width: 100%; height: 100%; margin: 0;
		cursor: pointer; z-index: 2;
	}
	.geo-switch .track {
		position: absolute; inset: 0;
		background: var(--bg-raised);
		border: 1px solid var(--border);
		border-radius: 999px;
		transition: background .15s, border-color .15s;
	}
	.geo-switch .thumb {
		position: absolute; top: 2px; left: 2px;
		width: calc(var(--h) - 6px); height: calc(var(--h) - 6px);
		background: var(--fg-muted);
		border-radius: 50%;
		transition: left .18s ease, background .15s;
	}
	.geo-switch input:checked ~ .track {
		background: var(--green-bg); border-color: var(--green-border);
	}
	.geo-switch input:checked ~ .thumb {
		left: calc(var(--w) - var(--h) + 2px);
		background: var(--green);
	}
	.geo-master .state {
		font-family: var(--mono); font-size: 10.5px;
		letter-spacing: 0.04em; min-width: 4.5em;
		color: var(--fg-dimmer);
	}
	.geo-master .state.is-on { color: var(--green); }
	.geo-spinner {
		width: 12px; height: 12px; flex-shrink: 0;
		border: 1.5px solid var(--border);
		border-top-color: var(--accent);
		border-radius: 50%;
		animation: geo-spin .7s linear infinite;
	}
	.geo-spinner.hidden { display: none; }
	@keyframes geo-spin { to { transform: rotate(360deg); } }

	/* Lockout warning — uses red status family */
	.geo-alert {
		display: flex; align-items: flex-start; gap: 10px;
		padding: 12px 14px;
		border-radius: 5px;
		font-size: 12px; line-height: 1.5;
		margin: 14px 18px 0;
	}
	.geo-alert.warn {
		background: var(--red-bg);
		border: 1px solid var(--red-border);
		color: var(--red);
	}
	.geo-alert .icon {
		flex-shrink: 0; width: 16px; height: 16px;
		display: grid; place-items: center;
		font-family: var(--mono); font-weight: 700;
		font-size: 11px;
		border-radius: 50%;
		border: 1.5px solid currentColor;
		line-height: 1;
	}
	.geo-alert strong { color: currentColor; font-weight: 600; }
	.geo-alert .body { color: var(--fg); flex: 1; }
	.geo-alert.warn .body { color: oklch(from var(--red) calc(l - 0.10) c h); }
	body.theme-dark .geo-alert.warn .body { color: oklch(from var(--red) calc(l + 0.05) c h); }

	/* Mode selector */
	.geo-mode-grid {
		display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	}
	@media (max-width: 720px) {
		.geo-mode-grid { grid-template-columns: 1fr; }
	}
	.geo-mode {
		display: block; padding: 14px 16px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 5px;
		cursor: pointer;
		transition: border-color .15s, background .15s, box-shadow .15s;
	}
	.geo-mode:hover { border-color: var(--border-strong); background: var(--bg-hover); }
	.geo-mode.is-active {
		border-color: var(--accent);
		background: var(--accent-bg);
		box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15);
	}
	.geo-mode-head {
		display: flex; align-items: center; gap: 10px;
		margin-bottom: 6px;
	}
	.geo-mode-radio {
		appearance: none; -webkit-appearance: none;
		width: 14px; height: 14px;
		border: 1.5px solid var(--border-strong);
		border-radius: 50%;
		background: var(--bg-panel);
		flex-shrink: 0; margin: 0;
		cursor: pointer;
		position: relative;
		transition: border-color .15s;
	}
	.geo-mode-radio:checked {
		border-color: var(--accent);
	}
	.geo-mode-radio:checked::after {
		content: ""; position: absolute;
		inset: 2px; border-radius: 50%;
		background: var(--accent);
	}
	.geo-mode-title {
		font-size: 12.5px; font-weight: 600; color: var(--fg);
		letter-spacing: -0.005em;
	}
	.geo-mode-desc {
		margin: 0; font-size: 11.5px; color: var(--fg-dim);
		line-height: 1.5;
	}

	/* Coverage map */
	#svgMap {
		width: 100%; min-height: 320px;
		background: var(--bg);
		border-radius: 5px;
		padding: 4px;
	}
	#svgMap .svgMap-map-wrapper {
		padding-top: 0; height: 360px;
		background: var(--bg);
		border-radius: 4px;
	}
	#svgMap .svgMap-country {
		stroke: var(--bg-panel); stroke-width: .6;
		cursor: pointer;
		transition: opacity .12s;
	}
	#svgMap .svgMap-country:hover { opacity: 0.8; }
	#svgMap .svgMap-tooltip {
		font-family: var(--sans);
		background: var(--bg-panel);
		border: 1px solid var(--border-strong);
		color: var(--fg);
		box-shadow: 0 8px 24px oklch(0.1 0 0 / 0.15);
		border-radius: 5px;
	}
	#svgMap .svgMap-tooltip-title { color: var(--fg); font-weight: 600; }
	#svgMap .svgMap-tooltip-content { color: var(--fg-dim); }
	#svgMap .svgMap-tooltip-pointer { background: var(--bg-panel); border-color: var(--border-strong); }
	#svgMap .svgMap-zoom-control button {
		background: var(--bg-panel) !important;
		border: 1px solid var(--border) !important;
		color: var(--fg-dim) !important;
		border-radius: 3px !important;
	}
	#svgMap .svgMap-zoom-control button:hover {
		color: var(--accent) !important;
		border-color: var(--accent-border) !important;
		background: var(--accent-bg) !important;
	}

	/* Map legend */
	.geo-legend {
		display: flex; gap: 14px; flex-wrap: wrap;
		font-family: var(--mono); font-size: 10.5px;
		color: var(--fg-dimmer); letter-spacing: 0.02em;
	}
	.geo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
	.geo-legend-swatch {
		width: 12px; height: 12px; border-radius: 2px;
		border: 1px solid var(--border);
	}

	/* Add-country row */
	.geo-add-row {
		display: flex; gap: 8px; align-items: stretch;
		flex-wrap: wrap;
		margin-bottom: 14px;
	}
	.geo-select {
		flex: 1; min-width: 240px; max-width: 360px;
		height: 34px; padding: 0 10px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 5px;
		color: var(--fg);
		font-family: var(--sans); font-size: 12.5px;
		outline: 0;
		transition: border-color .15s, box-shadow .15s, background .15s;
	}
	.geo-select:focus {
		border-color: var(--accent);
		background: var(--bg-panel);
		box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.30);
	}
	.bf-btn-primary {
		display: inline-flex; align-items: center; gap: 6px;
		height: 34px; padding: 0 14px;
		background: var(--accent); color: oklch(1 0 0);
		border: 1px solid var(--accent);
		border-radius: 5px;
		font-family: var(--sans); font-size: 12px; font-weight: 600;
		letter-spacing: 0.02em;
		cursor: pointer;
		transition: filter .12s, opacity .12s;
	}
	body.theme-dark .bf-btn-primary { color: var(--bg); }
	.bf-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
	.bf-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
	.bf-btn-primary .glyph { font-size: 14px; line-height: 1; font-weight: 700; }

	/* Capacity / empty states */
	.geo-capacity-warn {
		display: none;
		align-items: flex-start; gap: 10px;
		padding: 10px 14px;
		background: var(--amber-bg);
		border: 1px solid var(--amber-border);
		color: var(--amber);
		border-radius: 5px;
		font-size: 12px;
		margin-bottom: 14px;
	}
	.geo-capacity-warn.is-shown { display: flex; }
	.bf-empty {
		display: none;
		text-align: center;
		padding: 36px 16px;
		color: var(--fg-dimmer);
	}
	.bf-empty.is-shown { display: block; }
	.bf-empty .glyph {
		display: inline-grid; place-items: center;
		width: 38px; height: 38px;
		border-radius: 50%;
		border: 1.5px solid var(--border);
		font-family: var(--mono); font-size: 16px;
		color: var(--fg-muted);
		margin-bottom: 10px;
	}
	.bf-empty .msg {
		font-family: var(--mono); font-size: 11.5px;
		color: var(--fg-dim);
	}

	/* Country chips */
	.geo-chips {
		display: flex; flex-wrap: wrap; gap: 6px;
	}
	.geo-chip {
		display: inline-flex; align-items: center; gap: 6px;
		height: 26px; padding: 0 4px 0 9px;
		border-radius: 13px;
		font-family: var(--mono); font-size: 11px;
		font-weight: 500;
		background: var(--bg-raised);
		border: 1px solid var(--border);
		color: var(--fg);
		transition: border-color .12s, background .12s;
	}
	.geo-chip:hover { border-color: var(--border-strong); }
	.geo-chip.is-block {
		background: var(--red-bg);
		border-color: var(--red-border);
		color: var(--red);
	}
	.geo-chip.is-allow {
		background: var(--green-bg);
		border-color: var(--green-border);
		color: var(--green);
	}
	.geo-chip .iso {
		font-weight: 700; letter-spacing: 0.04em;
	}
	.geo-chip .sep {
		opacity: 0.4; font-size: 10px;
	}
	.geo-chip .name {
		font-family: var(--sans); font-size: 11.5px; font-weight: 500;
		max-width: 16ch;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.geo-chip-x {
		background: transparent; border: 0; padding: 0;
		width: 18px; height: 18px;
		display: grid; place-items: center;
		border-radius: 50%;
		color: currentColor; opacity: 0.55;
		cursor: pointer;
		font-family: var(--mono); font-size: 13px; line-height: 1;
		transition: opacity .12s, background .12s;
	}
	.geo-chip-x:hover {
		opacity: 1;
		background: oklch(from currentColor l c h / 0.15);
	}

	/* Preset buttons */
	.geo-preset-row {
		display: flex; flex-wrap: wrap; gap: 8px;
		margin-bottom: 14px;
	}
	.geo-btn-preset {
		display: inline-flex; align-items: center; gap: 8px;
		height: 30px; padding: 0 12px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 5px;
		font-family: var(--sans); font-size: 11.5px; font-weight: 500;
		color: var(--fg-dim);
		cursor: pointer;
		transition: color .12s, border-color .12s, background .12s;
	}
	.geo-btn-preset .tier-num {
		font-family: var(--mono); font-size: 9.5px;
		font-weight: 700; letter-spacing: 0.06em;
		text-transform: uppercase;
		padding: 1px 5px; border-radius: 2px;
		background: var(--bg-raised);
		border: 1px solid var(--border-subtle);
		color: var(--fg-dimmer);
	}
	.geo-btn-preset:hover {
		color: var(--fg);
		border-color: var(--border-strong);
		background: var(--bg-hover);
	}
	.geo-btn-preset.tier-1:hover  { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
	.geo-btn-preset.tier-1:hover  .tier-num { color: var(--amber); border-color: var(--amber-border); }
	.geo-btn-preset.tier-2:hover  { color: var(--red);   border-color: var(--red-border);   background: var(--red-bg); }
	.geo-btn-preset.tier-2:hover  .tier-num { color: var(--red); border-color: var(--red-border); }
	.geo-btn-preset.tier-clear:hover { color: var(--fg-dim); }
	.geo-btn-preset:disabled { opacity: 0.5; cursor: not-allowed; }

	.geo-preset-key {
		font-size: 11.5px; line-height: 1.6;
		color: var(--fg-dim);
		padding: 10px 12px;
		background: var(--bg);
		border: 1px solid var(--border-subtle);
		border-radius: 5px;
	}
	.geo-preset-key strong { color: var(--fg); font-weight: 600; }
	.geo-preset-status {
		margin: 8px 0 0;
		font-family: var(--mono); font-size: 10.5px;
		color: var(--fg-dimmer);
		display: none;
	}
	.geo-preset-status.is-shown { display: block; }

	/* Inline icon shim — page is loaded outside admin shell so .fe glyphs
	 * may not resolve. Provide minimal mono-glyph fallbacks. */
	.geo-glyph {
		display: inline-block;
		width: 1em; text-align: center;
		font-family: var(--mono);
		font-weight: 700;
		opacity: 0.85;
	}
</style>

<script type="text/javascript" nonce="{{nonce}}">
	window.BITFIRE_NONCE = '{{api_code}}';
</script>
<script src="{{public}}svg-pan-zoom.min.js"></script>
<script src="{{public}}svgMap.min.js"></script>

<div class="bf-man-content">

{{> header.html page_title="Geo Blocking" header_widgets="
<span class='bf-count-pill' id='geo-count-badge'> <span class='num'>{{active_count}}</span> <span>{{active_count_label}}</span> </span>'
}}


<div class="bf-shell">

	<!-- ── Hero ───────────────────────────────────────────────────────── -->
	<section class="bf-hero">
		<h1>Geographic blocking</h1>
		<p class="lede">
			Block or allow HTTP traffic based on the visitor's country of origin.
			Powered by a binary IP database updated monthly and bundled with BitFire.
			<strong>Logged-in WordPress administrators</strong> and
			<strong>browser-verified users</strong> are never geo-blocked regardless
			of these settings.
		</p>
	</section>

	<!-- ── Card A: Mode + master toggle ─────────────────────────────────── -->
	<section class="bf-card" id="mode-card">
		<header class="bf-card-head">
			<div class="titles">
				<h2>Blocking mode</h2>
				<p class="blurb">Choose whether the country list denies (block) or permits (allow) traffic.</p>
			</div>
<!--
			<label class="geo-master" for="geo_block_enabled_block">
				<span class="label">Geographic Blocking</span>
				<div class="geo-spinner hidden" id="geo_block_enabled_spin" role="status" aria-label="Saving"></div>
				<span class="geo-switch">
					<input type="checkbox"
					       id="geo_block_enabled_block"
					       autocomplete="off"
					       data-initial="{{geo_block_enabled}}"
					       onclick="window.geoToggle()">
					<span class="track" aria-hidden="true"></span>
					<span class="thumb" aria-hidden="true"></span>
				</span>
				<span class="state" id="geo-enabled-label"></span>
			</label>
-->
		</header>

		<!-- Lockout warning — surfaced by JS when admin's country would be blocked -->
		<div id="lockout-warning" class="geo-alert warn" style="display:none;">
			<span class="icon" aria-hidden="true">!</span>
			<div class="body">
				<strong>Warning -</strong>
				your current location (<strong id="lockout-country-name"></strong>)
				would be blocked by these settings, locking out your own admin access.
				Add your IP to the allow list under <em>Rule Tune / IP Block</em> first.
			</div>
		</div>

		<div class="bf-card-body">
			<div class="geo-mode-grid">
				<label class="geo-mode" id="mode-block-label">
					<div class="geo-mode-head">
						<input type="radio" name="geo_mode" id="mode-block-radio"
						       class="geo-mode-radio"
						       value="block" {{mode_block_checked}}
						       onchange="setMode('block')">
						<span class="geo-mode-title">Block selected countries</span>
					</div>
					<p class="geo-mode-desc">
						Allow all traffic except IPs from the countries you list.
						Best for blocking known hostile regions while keeping the
						site open to the rest of the world.
					</p>
				</label>

				<label class="geo-mode" id="mode-allow-label">
					<div class="geo-mode-head">
						<input type="radio" name="geo_mode" id="mode-allow-radio"
						       class="geo-mode-radio"
						       value="allow" {{mode_allow_checked}}
						       onchange="setMode('allow')">
						<span class="geo-mode-title">Allow only selected countries</span>
					</div>
					<p class="geo-mode-desc">
						Deny all traffic except IPs from the countries you list.
						Best for region-restricted services. IPs with no geo data
						always pass through.
					</p>
				</label>
			</div>
		</div>
	</section>

	<!-- ── Card M: Coverage map ─────────────────────────────────────────── -->
	<section class="bf-card" id="map-card">
		<header class="bf-card-head">
			<div class="titles">
				<h2 id="map-card-title">Coverage map</h2>
				<p class="blurb" id="map-card-desc"></p>
			</div>
			<div class="geo-legend">
				<span class="geo-legend-item">
					<span class="geo-legend-swatch" id="legend-listed-swatch"></span>
					<span id="legend-listed-label">listed</span>
				</span>
				<span class="geo-legend-item">
					<span class="geo-legend-swatch" id="legend-unlisted-swatch"></span>
					<span id="legend-unlisted-label">unlisted</span>
				</span>
			</div>
		</header>
		<div class="bf-card-body tight" style="padding: 8px;">
			<div id="svgMap"></div>
		</div>
	</section>

	<!-- ── Card C: Country list management ──────────────────────────────── -->
	<section class="bf-card" id="countries-card">
		<header class="bf-card-head">
			<div class="titles">
				<h2 id="countries-card-title">Countries</h2>
				<p class="blurb" id="countries-card-desc"></p>
			</div>
			<span class="head-meta" id="geo-chip-count">{{active_count}} / 127</span>
		</header>
		<div class="bf-card-body">

			<div class="geo-add-row">
				<select id="geo-country-select" class="geo-select"
				        data-choices='{"searchEnabled":true,"shouldSort":true,"placeholder":true,"placeholderValue":"Search country\u2026","searchPlaceholderValue":"Type to search\u2026"}'>
					{{ country_options_html}}
				</select>
				<button class="bf-btn-primary" onclick="addCountry()" id="geo-add-btn">
					<span class="glyph">+</span>
					<span>Add country</span>
				</button>
			</div>

			<div id="geo-capacity-warning" class="geo-capacity-warn">
				<span class="geo-glyph">!</span>
				<span>Maximum of 127 countries reached. Remove one before adding another.</span>
			</div>

			<div id="geo-empty-state" class="bf-empty">
				<div class="glyph" aria-hidden="true">⌖</div>
				<div class="msg" id="geo-empty-msg"></div>
			</div>

			<div id="geo-chips" class="geo-chips">
				<!-- rendered by renderChips() on DOMContentLoaded -->
			</div>

		</div>
	</section>

	<!-- ── Card D: Quick presets (block mode only) ──────────────────────── -->
	<section class="bf-card" id="preset-card" style="display:none;">
		<header class="bf-card-head">
			<div class="titles">
				<h2>Quick presets</h2>
				<p class="blurb">Additive - preserves existing list. Choose a tier to extend the block list.</p>
			</div>
		</header>
		<div class="bf-card-body">

			<div class="geo-preset-row">
				<button class="geo-btn-preset tier-1" id="preset-btn-1"
				        onclick="applyPreset(['RU','IN','CN','IR','BR'])"
				        title="Russia, India, China, Iran, Brazil">
					<span class="tier-num">tier 1</span>
					<span>Core threat regions</span>
					<span class="head-meta" style="font-size:10px;">+5</span>
				</button>

				<button class="geo-btn-preset tier-2" id="preset-btn-2"
				        onclick="applyPreset(['RU','IN','CN','IR','BR','VN','TH','ID','RO','UA','NG','KP','BY','GH','ZA','MD','IL'])"
				        title="Tier 1 + extended threat / fraud regions">
					<span class="tier-num">tier 2</span>
					<span>Extended threat &amp; fraud regions</span>
					<span class="head-meta" style="font-size:10px;">+17</span>
				</button>

				<button class="geo-btn-preset tier-clear" id="preset-btn-clear"
				        onclick="clearAll()"
				        title="Remove all countries from the current list">
					<span class="tier-num">×</span>
					<span>Clear all</span>
				</button>
			</div>

			<div class="geo-preset-key">
				<strong>Tier 1:</strong> Russia, India, China, Iran, Brazil<br>
				<strong>Tier 2 adds:</strong> Vietnam, Thailand, Indonesia, Romania, Ukraine, Nigeria, North Korea, Belarus, Ghana, South Africa, Moldova, Israel
			</div>

			<p id="preset-status" class="geo-preset-status"></p>
		</div>
	</section>

</div><!-- /.bf-shell -->

</div><!-- /.bf-man-content -->


<!-- Theme toggle handled by internal.js; re-color map on change -->
<script type="text/javascript" nonce="{{nonce}}">
document.addEventListener('bitfire:theme', function () {
	if (typeof window.__geoUpdateMapColors === 'function') window.__geoUpdateMapColors();
	if (typeof window.__geoUpdateLegend  === 'function') window.__geoUpdateLegend();
});
</script>


<!-- ============== GEO LOGIC ============== -->
<script type="text/javascript" nonce="{{nonce}}">
(function() {
'use strict';

/* ── Constants injected by PHP ─────────────────────────────────────────── */
var GEO_LIST_KEY  = '{{active_list_key}}';   // geo_blocked_countries | geo_allowed_countries
var GEO_MODE      = '{{geo_block_mode}}';    // block | allow
var ADMIN_ISO     = '{{admin_country_iso}}';
var ADMIN_NAME    = '{{admin_country_name}}';
var MAX_COUNTRIES = 127;

/* Active list — array of {iso, name} objects */
var geoCountries = {{ active_countries_json}};

/* Tiny DOM helper alias to keep call sites short */
function GBI(id) { return document.getElementById(id); }

/* ── Helpers ────────────────────────────────────────────────────────────── */
function isoIndex(iso) {
	for (var i = 0; i < geoCountries.length; i++) {
		if (geoCountries[i].iso === iso) { return i; }
	}
	return -1;
}

function escHtml(s) {
	return String(s)
		.replace(/&/g, '&amp;').replace(/</g, '&lt;')
		.replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

/* ── Map colors ─────────────────────────────────────────────────────────── */
/* Resolve from the active CSS theme so day/dark swap automatically. */
function tokenColor(name) {
	var v = getComputedStyle(document.body).getPropertyValue(name).trim();
	return v || '#888';
}
function mapAllowColor() {
	/* Use explicit hex colors here rather than theme tokens so the map shift is
	   visibly lighter and consistent across browsers/SVG fill handling. */
	return document.body.classList.contains('theme-dark')
		? '#8fdfb2'
		: '#7fd3a0';
}
function mapAllowTintColor() {
	return document.body.classList.contains('theme-dark')
		? '#355846'
		: '#dff5e7';
}
function mapListedColor() {
	return GEO_MODE === 'block' ? tokenColor('--red') : mapAllowColor();
}
function mapUnlistedColor() {
	// Soft tint of the opposite — listed countries dominate, unlisted recede
	return GEO_MODE === 'block' ? mapAllowTintColor() : tokenColor('--red-bg');
}

/* Re-color all SVG country paths to match the current geoCountries list.
   Called after every add / remove — much cheaper than re-initialising the map. */
function updateMapColors() {
	var paths = document.querySelectorAll('[id^="svgMap-map-country-"]');
	if (!paths.length) { return; }
	var listed = {};
	for (var i = 0; i < geoCountries.length; i++) {
		listed[geoCountries[i].iso] = true;
	}
	var lc = mapListedColor();
	var uc = mapUnlistedColor();
	for (var j = 0; j < paths.length; j++) {
		var pathIso = paths[j].getAttribute('data-id');
		paths[j].setAttribute('fill', listed[pathIso] ? lc : uc);
	}
}
window.__geoUpdateMapColors = updateMapColors;

/* Update legend swatches whenever theme or mode changes */
function updateLegend() {
	var listSwatch  = GBI('legend-listed-swatch');
	var unlistSwatch= GBI('legend-unlisted-swatch');
	var listLabel   = GBI('legend-listed-label');
	var unlistLabel = GBI('legend-unlisted-label');
	if (listSwatch)   { listSwatch.style.background   = mapListedColor(); }
	if (unlistSwatch) { unlistSwatch.style.background = mapUnlistedColor(); }
	if (listLabel)    { listLabel.textContent   = (GEO_MODE === 'block') ? 'blocked' : 'allowed'; }
	if (unlistLabel)  { unlistLabel.textContent = (GEO_MODE === 'block') ? 'allowed' : 'blocked'; }
}
window.__geoUpdateLegend = updateLegend;

/* ── Add country triggered by a map click (no dropdown involved) ─────────── */
window.addCountryByIso = function(iso) {
	if (geoCountries.length >= MAX_COUNTRIES) { return; }
	if (isoIndex(iso) >= 0) { return; }

	/* Resolve display name from the select options (already loaded in DOM) */
	var name = iso;
	var sel  = GBI('geo-country-select');
	if (sel) {
		for (var j = 0; j < sel.options.length; j++) {
			if (sel.options[j].value === iso) {
				name = sel.options[j].text.replace(/\s*\([A-Z]{2}\)\s*$/, '').trim();
				break;
			}
		}
	}

	/* Optimistic update */
	geoCountries.push({ iso: iso, name: name });
	renderChips();

	BitFire_api('add_list_elm', { config_name: GEO_LIST_KEY, config_value: iso })
		.then(function(r) { return r.json(); })
		.then(function(res) {
			if (!res.success) {
				var idx = isoIndex(iso);
				if (idx >= 0) { geoCountries.splice(idx, 1); }
				renderChips();
				alert('Could not add ' + iso + ': ' + (res.note || 'unknown error'));
			}
		})
		.catch(function(err) {
			var idx = isoIndex(iso);
			if (idx >= 0) { geoCountries.splice(idx, 1); }
			renderChips();
			alert('Request failed: ' + err);
		});
};

/* ── Initialise the svgMap world map ─────────────────────────────────────── */
function initMap() {
	if (!window.svgMap) { return; }

	/* Build initial values: listed countries get an explicit color;
	   unlisted countries fall through to colorNoData. */
	var mapValues = {};
	for (var i = 0; i < geoCountries.length; i++) {
		mapValues[geoCountries[i].iso] = { color: mapListedColor(), status: 1 };
	}

	try {
		new svgMap({
			targetElementID:       'svgMap',
			colorNoData:           mapUnlistedColor(),
			mouseWheelZoomEnabled: false,
			hideFlag:              true,
			showZoomReset:         true,
			data: {
				data:      { status: { name: 'Status' } },
				applyData: 'status',
				values:    mapValues
			},
			onGetTooltip: function(tooltipEl, iso) {
				/* onGetTooltip must return a DOM Node — append() treats a plain
				   string as a text node, which renders the markup literally. */
				var container = document.createElement('div');
				container.className = 'svgMap-tooltip-content-container';

				/* Country name — svgMap.prototype.countries is the library's own
				   built-in ISO→name map, accessible on the exported constructor. */
				var titleEl = document.createElement('div');
				titleEl.className = 'svgMap-tooltip-title';
				titleEl.textContent = (window.svgMap && svgMap.prototype.countries[iso]) || iso;
				container.appendChild(titleEl);

				/* Action hint */
				var inList   = isoIndex(iso) >= 0;
				var action   = GEO_MODE === 'block'
					? (inList ? 'Click to unblock' : 'Click to block')
					: (inList ? 'Click to remove' : 'Click to allow');
				var hintEl   = document.createElement('div');
				hintEl.className = 'svgMap-tooltip-content';
				hintEl.innerHTML = '<table><tr><td><span>' + escHtml(action) + '</span></td></tr></table>';
				container.appendChild(hintEl);

				return container;
			}
		});
	} catch (e) {
		console.warn('svgMap init error:', e);
		return;
	}

	/* Attach click-to-toggle listeners directly on each country path using
	   pointerdown/pointerup — a completely separate event stream from the
	   mousedown/mouseup that svg-pan-zoom intercepts.  svg-pan-zoom's
	   preventMouseEventsDefault calls preventDefault() on mousedown which
	   suppresses click in Chromium/WebKit; pointer events are unaffected.
	   50 ms delay lets svg-pan-zoom finish moving paths into its viewport <g>. */
	setTimeout(function() {
		var paths = document.querySelectorAll('#svgMap .svgMap-country');
		for (var i = 0; i < paths.length; i++) {
			(function(path) {
				var pdX = 0, pdY = 0;
				path.addEventListener('pointerdown', function(e) {
					pdX = e.clientX;
					pdY = e.clientY;
				});
				path.addEventListener('pointerup', function(e) {
					if (Math.abs(e.clientX - pdX) > 5 ||
					    Math.abs(e.clientY - pdY) > 5) { return; }
					var iso = path.getAttribute('data-id');
					if (!iso) { return; }
					if (isoIndex(iso) >= 0) {
						removeCountry(iso);
					} else {
						addCountryByIso(iso);
					}
				});
			})(paths[i]);
		}
	}, 50);
}

/* ── Badge + capacity state ─────────────────────────────────────────────── */
function updateCountBadge() {
	var n     = geoCountries.length;
	var badge = GBI('geo-chip-count');
	var main  = GBI('geo-count-badge');
	var warn  = GBI('geo-capacity-warning');
	var btn   = GBI('geo-add-btn');
	if (badge) { badge.textContent = n + ' / ' + MAX_COUNTRIES; }
	if (main)  {
		main.innerHTML = '<span class="num">' + n + '</span>'
			+ '<span>countr' + (n === 1 ? 'y' : 'ies') + '</span>';
	}
	if (warn)  {
		if (n >= MAX_COUNTRIES) { warn.classList.add('is-shown'); }
		else                    { warn.classList.remove('is-shown'); }
	}
	if (btn)   { btn.disabled = (n >= MAX_COUNTRIES); }
}

/* ── Lockout warning ────────────────────────────────────────────────────── */
function checkLockout() {
	if (!ADMIN_ISO || ADMIN_ISO === 'XX') { return; }
	var warn    = GBI('lockout-warning');
	var nameEl  = GBI('lockout-country-name');
	var blocked = (GEO_MODE === 'block')
		? (isoIndex(ADMIN_ISO) >= 0)
		: (isoIndex(ADMIN_ISO) < 0);
	if (nameEl) { nameEl.textContent = ADMIN_NAME || ADMIN_ISO; }
	if (warn)   { warn.style.display = blocked ? 'flex' : 'none'; }
}

/* ── Render country chips ───────────────────────────────────────────────── */
function renderChips() {
	var container = GBI('geo-chips');
	var empty     = GBI('geo-empty-state');
	var emptyMsg  = GBI('geo-empty-msg');
	if (!container) { return; }

	container.innerHTML = '';

	if (geoCountries.length === 0) {
		if (empty)    { empty.classList.add('is-shown'); }
		if (emptyMsg) {
			emptyMsg.textContent = (GEO_MODE === 'block')
				? '// no countries blocked. use the dropdown above to add countries.'
				: '// allow list empty. all non-local traffic will be denied.';
		}
		updateCountBadge();
		checkLockout();
		updateMapColors();
		return;
	}
	if (empty) { empty.classList.remove('is-shown'); }

	var chipClass = (GEO_MODE === 'block') ? 'is-block' : 'is-allow';

	for (var i = 0; i < geoCountries.length; i++) {
		var c    = geoCountries[i];
		var span = document.createElement('span');
		span.id  = 'chip-' + c.iso;
		span.className = 'geo-chip ' + chipClass;
		(function(iso, name) {
			span.innerHTML =
				  '<span class="iso">' + escHtml(iso) + '</span>'
				+ '<span class="sep">·</span>'
				+ '<span class="name">' + escHtml(name) + '</span>'
				+ '<button type="button"'
				+ ' class="geo-chip-x"'
				+ ' onclick="removeCountry(\'' + escHtml(iso) + '\')"'
				+ ' title="Remove ' + escHtml(name) + '"'
				+ ' aria-label="Remove ' + escHtml(name) + '">'
				+ '×</button>';
		}(c.iso, c.name));
		container.appendChild(span);
	}

	updateCountBadge();
	checkLockout();
	updateMapColors();
}

/* ── Card titles / preset card visibility ───────────────────────────────── */
function setModeLabels() {
	var title      = GBI('countries-card-title');
	var desc       = GBI('countries-card-desc');
	var blockLabel = GBI('mode-block-label');
	var allowLabel = GBI('mode-allow-label');
	var blockRadio = GBI('mode-block-radio');
	var allowRadio = GBI('mode-allow-radio');
	var presets    = GBI('preset-card');
	var mapDesc    = GBI('map-card-desc');
	var mapTitle   = GBI('map-card-title');

	if (mapTitle) { mapTitle.textContent = 'Coverage map'; }

	if (GEO_MODE === 'block') {
		if (title)      { title.textContent   = 'Blocked countries'; }
		if (desc)       { desc.textContent    = 'Requests from these countries are denied with HTTP 403.'; }
		if (mapDesc)    { mapDesc.textContent = 'Click any country to toggle its status.'; }
		if (blockLabel) { blockLabel.classList.add('is-active'); }
		if (allowLabel) { allowLabel.classList.remove('is-active'); }
		if (blockRadio) { blockRadio.checked = true; }
		if (presets)    { presets.style.display = 'block'; }
	} else {
		if (title)      { title.textContent   = 'Allowed countries'; }
		if (desc)       { desc.textContent    = 'Only requests from these countries are permitted.'; }
		if (mapDesc)    { mapDesc.textContent = 'Click any country to toggle its status.'; }
		if (blockLabel) { blockLabel.classList.remove('is-active'); }
		if (allowLabel) { allowLabel.classList.add('is-active'); }
		if (allowRadio) { allowRadio.checked = true; }
		if (presets)    { presets.style.display = 'none'; }
	}
	updateLegend();
}

/* ── Add country ────────────────────────────────────────────────────────── */
window.addCountry = function() {
	if (geoCountries.length >= MAX_COUNTRIES) { return; }
	var sel = GBI('geo-country-select');
	if (!sel) { return; }
	var iso = sel.value.trim().toUpperCase();
	if (!iso) { return; }
	if (isoIndex(iso) >= 0) { return; } // duplicate

	/* resolve display name from option text */
	var name = iso;
	var opts = sel.options;
	for (var j = 0; j < opts.length; j++) {
		if (opts[j].value === iso) {
			name = opts[j].text.replace(/\s*\([A-Z]{2}\)\s*$/, '').trim();
			break;
		}
	}

	/* optimistic update */
	geoCountries.push({iso: iso, name: name});
	renderChips();

	var btn = GBI('geo-add-btn');
	if (btn) { btn.disabled = true; }

	BitFire_api('add_list_elm', {config_name: GEO_LIST_KEY, config_value: iso})
		.then(function(r) { return r.json(); })
		.then(function(res) {
			if (btn) { btn.disabled = (geoCountries.length >= MAX_COUNTRIES); }
			if (!res.success) {
				var idx = isoIndex(iso);
				if (idx >= 0) { geoCountries.splice(idx, 1); }
				renderChips();
				alert('Could not add ' + iso + ': ' + (res.note || 'unknown error'));
			}
		})
		.catch(function(err) {
			var idx = isoIndex(iso);
			if (idx >= 0) { geoCountries.splice(idx, 1); }
			renderChips();
			alert('Request failed: ' + err);
		});
};

/* ── Remove country ─────────────────────────────────────────────────────── */
window.removeCountry = function(iso) {
	var idx = isoIndex(iso);
	if (idx < 0) { return; }

	/* optimistic update */
	var removed = geoCountries.splice(idx, 1)[0];
	renderChips();

	BitFire_api('remove_list_elm', {config_name: GEO_LIST_KEY, config_value: iso, index: idx})
		.then(function(r) { return r.json(); })
		.then(function(res) {
			if (!res.success) {
				geoCountries.splice(idx, 0, removed);
				renderChips();
				alert('Could not remove ' + iso + ': ' + (res.note || 'unknown error'));
			}
		})
		.catch(function(err) {
			geoCountries.splice(idx, 0, removed);
			renderChips();
			alert('Request failed: ' + err);
		});
};

/* ── Switch mode ────────────────────────────────────────────────────────── */
window.setMode = function(newMode) {
	if (newMode === GEO_MODE) { return; }
	var isEnabled = true;
	BitFire_api('set_geo_config', {
		enabled:   isEnabled ? 'true' : 'false',
		mode:      newMode,
		countries: '[]'
	})
	.then(function(r) { return r.json(); })
	.then(function(res) {
		if (res.success) {
			window.location.reload();
		} else {
			var radio = GBI('mode-' + GEO_MODE + '-radio');
			if (radio) { radio.checked = true; }
			alert('Could not switch mode: ' + (res.note || 'unknown error'));
		}
	});
};

/* ── Apply preset ───────────────────────────────────────────────────────── */
window.applyPreset = function(isoList) {
	var needed = [];
	for (var i = 0; i < isoList.length; i++) {
		if (isoIndex(isoList[i]) < 0) { needed.push(isoList[i]); }
	}
	if (needed.length === 0) { return; }
	if (geoCountries.length + needed.length > MAX_COUNTRIES) {
		alert('Adding this preset would exceed the 127-country limit.');
		return;
	}

	// Requests are sent sequentially with a 150 ms gap between each.
	// Concurrent writes to config.json race on filesystems without locking:
	// each request does read → append → write, so parallel writes stomp each
	// other.  Sequential dispatch ensures each write completes and is visible
	// to the next read before the next request is sent.
	var DELAY_MS = 150;

	// Disable preset buttons for the duration so the user can't double-fire.
	var btns = document.querySelectorAll('#preset-card button');
	btns.forEach(function(b) { b.disabled = true; });
	var statusEl = GBI('preset-status');
	if (statusEl) {
		statusEl.classList.add('is-shown');
		statusEl.textContent = '// adding 0 / ' + needed.length + '\u2026';
	}

	var idx = 0;

	function sendNext() {
		if (idx >= needed.length) {
			window.location.reload();
			return;
		}
		var iso = needed[idx++];
		if (statusEl) {
			statusEl.textContent = '// adding ' + idx + ' / ' + needed.length + '\u2026';
		}

		BitFire_api('add_list_elm', {config_name: GEO_LIST_KEY, config_value: iso})
			.then(function(r) { return r.json(); })
			.then(function(res) {
				if (!res.success && res.note !== 'already present') {
					// Non-fatal: log and continue so the rest of the preset still applies.
					console.warn('add_list_elm failed for ' + iso + ':', res.note);
				}
				setTimeout(sendNext, DELAY_MS);
			})
			.catch(function(err) {
				console.error('Request error for ' + iso + ':', err);
				// Reload so the UI reflects whatever was saved before the error.
				window.location.reload();
			});
	}

	sendNext();
};

/* ── Clear all ──────────────────────────────────────────────────────────── */
window.clearAll = function() {
	if (geoCountries.length === 0) { return; }
	if (!confirm('Remove all ' + geoCountries.length + ' countr' +
	             (geoCountries.length === 1 ? 'y' : 'ies') + ' from the list?')) { return; }
	var isEnabled = true;
	BitFire_api('set_geo_config', {
		enabled:   isEnabled ? 'true' : 'false',
		mode:      GEO_MODE,
		countries: '[]'
	})
	.then(function(r) { return r.json(); })
	.then(function(res) {
		if (res.success) {
			geoCountries = [];
			renderChips();
		} else {
			alert('Could not clear list: ' + (res.note || 'unknown error'));
		}
	});
};

/* ── Toggle init (self-contained — settings.html not loaded on this page) ─ */
function updateEnabledLabel(isOn) {
	var lbl = GBI('geo-enabled-label');
	if (!lbl) { return; }
	lbl.textContent = isOn ? 'enabled' : 'disabled';
	if (isOn) { lbl.classList.add('is-on'); }
	else      { lbl.classList.remove('is-on'); }
}

/* Exposed on window so the inline onclick can reach it outside the IIFE */
window.toggle_report = function(config) {
	var blockEl = GBI(config + '_block');
	var value   = (blockEl && blockEl.checked) ? 'on' : 'false';
	window.CONFIG_LIST = window.CONFIG_LIST || {};
	window.CONFIG_LIST[config] = value;
	if (config === 'geo_block_enabled') { updateEnabledLabel(value === 'on'); }
	var spin = GBI(config + '_spin');
	if (spin) { spin.classList.remove('hidden'); }
	BitFire_api('toggle_config_value', {param: config, value: value})
		.then(function(r) { return r.json(); })
		.then(function(d) {
			if (spin) { spin.classList.add('hidden'); }
			if (!d.success) {
				alert('Error updating ' + config + ': ' + (d.note || 'unknown'));
			}
		});
};

/* Called by the geo toggle's onclick — thin wrapper so the name is unambiguous */
window.geoToggle = function() {
	window.toggle_report('geo_block_enabled');
};

function initGeoToggle() {
	var el   = GBI('geo_block_enabled_block');
	if (!el) { return; }
	var init = el.getAttribute('data-initial') || 'false';
	var isOn = (init === 'true' || init === 'on');
	el.checked = isOn;
	window.CONFIG_LIST = window.CONFIG_LIST || {};
	window.CONFIG_LIST['geo_block_enabled'] = isOn ? 'on' : 'false';
	updateEnabledLabel(isOn);
}

/* ── Init ───────────────────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function() {
	initGeoToggle();
	setModeLabels();
	renderChips();
	initMap();
});

}()); /* end IIFE */
</script>