Add CSS flag dropdown select with lipis flag-icons

- css/flag-icons.css: lipis 4x3 set, 1x1 stripped, paths → ../icons/flags/
- countries_inc.php: asort, Smarty assigns, loadCss (PKG_PATH not PKG_URL);
  PHP files reduce to single require()
- flag_select_inc.tpl: custom dropdown with .fi CSS flags, search filter,
  jQuery open/close; fsName/fsValue/fsId/fsSize; min-width 300px;
  line-height:1.5em on flag spans
- html_head_inc.tpl placeholder; display templates keep {biticon istyle=flag}

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

5 files changed, 73 insertions, 20 deletions

diff --git a/templates/flag_select_inc.tpl b/templates/flag_select_inc.tpl
new file mode 100644
index 0000000..a73ceb1
--- /dev/null
+++ b/templates/flag_select_inc.tpl
@@ -0,0 +1,69 @@
+{* Flag country select widget.
+   Params: fsName (input name), fsValue (current alpha-3 code), fsId (unique element id)
+   Optional: fsSize (small|medium|large, default small) *}
+{assign var=_fsSizes value=['small'=>['w'=>21,'h'=>16],'medium'=>['w'=>32,'h'=>24],'large'=>['w'=>43,'h'=>32]]}
+{assign var=_fsDims value=$_fsSizes[$fsSize|default:'small']}
+{assign var=_fsStyle value="width:{$_fsDims.w}px;line-height:1.5em;vertical-align:middle"}
+{assign var=fsFlagCode value=$countryFlags[$fsValue]|default:''}
+<div class="bw-flag-select" id="{$fsId}">
+	<input type="hidden" name="{$fsName}" value="{$fsValue|escape}">
+	<button type="button" class="bw-flag-trigger form-control" style="text-align:left;cursor:pointer">
+		{if $fsFlagCode}<span class="fi fi-{$fsFlagCode}" style="{$_fsStyle};margin-right:6px"></span>{/if}<span class="bw-flag-label">{$countries[$fsValue]|default:''|escape}</span>
+		<span class="caret" style="float:right;margin-top:8px"></span>
+	</button>
+	<div class="bw-flag-dropdown panel panel-default" style="display:none;position:absolute;z-index:1050;min-width:300px">
+		<div class="panel-body" style="padding:6px">
+			<input type="text" class="bw-flag-search form-control input-sm" placeholder="{tr}Search{/tr}...">
+		</div>
+		<ul class="bw-flag-list list-unstyled" style="max-height:280px;overflow-y:auto;margin:0;padding:0 0 4px">
+			<li data-value="" data-label="" style="padding:4px 10px"><em>{tr}None{/tr}</em></li>
+			{foreach $countries as $code => $name}
+				{assign var=fc value=$countryFlags[$code]|default:''}
+				<li data-value="{$code|escape}" data-label="{$name|escape}" style="padding:3px 10px;cursor:pointer">
+					{if $fc}<span class="fi fi-{$fc}" style="{$_fsStyle};margin-right:6px"></span>{/if}{$name|escape}
+				</li>
+			{/foreach}
+		</ul>
+	</div>
+</div>
+{literal}
+<script>
+(function($) {
+	$(document).ready(function() {
+		$('.bw-flag-select').each(function() {
+			var $w = $(this), $input = $w.find('input[type=hidden]'),
+				$trigger = $w.find('.bw-flag-trigger'), $label = $w.find('.bw-flag-label'),
+				$dd = $w.find('.bw-flag-dropdown'), $search = $w.find('.bw-flag-search'),
+				$items = $w.find('.bw-flag-list li');
+
+			$trigger.on('click', function(e) {
+				e.stopPropagation();
+				$('.bw-flag-dropdown').not($dd).hide();
+				$dd.toggle();
+				if ($dd.is(':visible')) { $search.val('').trigger('input').focus(); }
+			});
+
+			$search.on('input', function() {
+				var q = $(this).val().toLowerCase();
+				$items.each(function() {
+					$(this).toggle(!q || $(this).data('label').toLowerCase().indexOf(q) !== -1);
+				});
+			});
+
+			$items.on('click', function() {
+				var val = $(this).data('value'), lbl = $(this).data('label');
+				$input.val(val);
+				$label.text(lbl);
+				var $fi = $(this).find('.fi');
+				$trigger.find('.fi').remove();
+				if ($fi.length) { $trigger.prepend($fi.clone().css('margin-right', '6px')); }
+				$dd.hide();
+			});
+
+			$(document).on('click.bwflag', function() { $dd.hide(); });
+			$dd.on('click', function(e) { e.stopPropagation(); });
+		});
+	});
+}(jQuery));
+</script>
+{/literal}
diff --git a/templates/html_head_inc.tpl b/templates/html_head_inc.tpl
new file mode 100644
index 0000000..a43660c
--- /dev/null
+++ b/templates/html_head_inc.tpl
@@ -0,0 +1 @@
+{* users html head — flag-icons.css loaded via countries_inc.php when $countries is assigned *}
diff --git a/templates/register.tpl b/templates/register.tpl
index 9f4ae89..366a1f0 100644
--- a/templates/register.tpl
+++ b/templates/register.tpl
@@ -129,12 +129,7 @@
 			<div class="form-group">
 				{formlabel label="Country" for="country"}
 				{forminput}
-					<select name="prefs[users_country]" id="country">
-						<option value=""></option>
-						{foreach $countries as $code => $name}
-							<option value="{$code|escape}"{if $smarty.request.prefs.users_country eq $code} selected="selected"{/if}>{$name|escape}</option>
-						{/foreach}
-					</select>
+					{include file="bitpackage:users/flag_select_inc.tpl" fsName="prefs[users_country]" fsValue=$smarty.request.prefs.users_country fsId="flag-select-reg"}
 					{formhelp note=""}
 				{/forminput}
 			</div>
diff --git a/templates/role_register.tpl b/templates/role_register.tpl
index e9b0463..3b4760c 100644
--- a/templates/role_register.tpl
+++ b/templates/role_register.tpl
@@ -145,12 +145,7 @@
 						<div class="form-group">
 							{formlabel label="Country" for="country"}
 							{forminput}
-								<select name="prefs[users_country]" id="country">
-									<option value=""></option>
-									{foreach $countries as $code => $name}
-										<option value="{$code|escape}"{if $smarty.request.prefs.users_country eq $code} selected="selected"{/if}>{$name|escape}</option>
-									{/foreach}
-								</select>
+								{include file="bitpackage:users/flag_select_inc.tpl" fsName="prefs[users_country]" fsValue=$smarty.request.prefs.users_country fsId="flag-select-role-reg"}
 								{formhelp note=""}
 							{/forminput}
 						</div>
diff --git a/templates/user_preferences.tpl b/templates/user_preferences.tpl
index 8ca189a..22d2cfa 100644
--- a/templates/user_preferences.tpl
+++ b/templates/user_preferences.tpl
@@ -61,14 +61,7 @@
 						<div class="form-group">
 							{formlabel label="Country" for="country"}
 							{forminput}
-								<select name="users_country" id="country" class="form-control">
-									<option value=""></option>
-									{foreach $countries as $code => $name}
-										<option value="{$code|escape}"{if $editUser->mPrefs.users_country_code eq $code} selected="selected"{/if}>{$name|escape}</option>
-									{/foreach}
-								</select>
-								&nbsp;
-								{if $editUser->mPrefs.flag}{biticon iforce=icon ipackage=users ipath="flags/" iname=$editUser->mPrefs.flag iexplain=$editUser->mPrefs.users_country istyle=flag}{/if}
+								{include file="bitpackage:users/flag_select_inc.tpl" fsName="users_country" fsValue=$editUser->mPrefs.users_country_code fsId="flag-select-prefs" fsSize="medium"}
 							{/forminput}
 						</div>