Replace datalist autocomplete with select dropdown for brand fields

datalist only shows suggestions when typing, not on click. Switched to
a <select> showing all known brands plus a 'New brand...' option that
reveals a text input for entering a new brand name.

templates/battery_add.html

@@ -7,12 +7,17 @@
 <div class="card">
   <form method="post" action="{{ url_for('battery_add') }}">
     <div class="form-group">
-      <label for="brand">Brand <span class="text-danger">*</span></label>
+      <label for="brand-select">Brand <span class="text-danger">*</span></label>
+      <select id="brand-select" onchange="brandSelectChanged(this, 'brand')">
+        <option value="">— select a brand —</option>
+        {% for b in brands|default([]) %}
+        <option value="{{ b }}">{{ b }}</option>
+        {% endfor %}
+        <option value="__new__">➕ New brand…</option>
+      </select>
       <input type="text" id="brand" name="brand" value="{{ form_brand|default('') }}"
-             placeholder="e.g. Panasonic Eneloop" list="brand-list" required>
-      <datalist id="brand-list">
-        {% for b in brands|default([]) %}<option value="{{ b }}">{% endfor %}
-      </datalist>
+             placeholder="Type new brand name" required
+             style="display:none;margin-top:0.4rem;">
     </div>
 
     <div class="form-group">
@@ -32,4 +37,34 @@
     </div>
   </form>
 </div>
+
+<script>
+function brandSelectChanged(sel, inputId) {
+  var input = document.getElementById(inputId);
+  if (sel.value === '__new__' || sel.value === '') {
+    input.style.display = '';
+    input.value = '';
+    input.focus();
+  } else {
+    input.style.display = 'none';
+    input.value = sel.value;
+  }
+}
+
+// Restore state on error re-render (form_brand set)
+(function () {
+  var input = document.getElementById('brand');
+  var sel = document.getElementById('brand-select');
+  if (!input.value) return;
+  for (var i = 0; i < sel.options.length; i++) {
+    if (sel.options[i].value === input.value) {
+      sel.value = input.value;
+      input.style.display = 'none';
+      return;
+    }
+  }
+  sel.value = '__new__';
+  input.style.display = '';
+}());
+</script>
 {% endblock %}