Выбор образа при создании машины карточками: название системы, размер, дата загрузки и поиск, когда образов много

web/templates/_image_picker.html

@@ -0,0 +1,26 @@
+{% from "_ui.html" import icon %}
+{#- Выбор образа карточками. Ожидает: picker_name (имя поля), picker_items (list_iso_files или list_disk_image_files),
+    picker_selected (путь выбранного), picker_icon. Поиск появляется, когда образов больше шести. -#}
+<div class="image-picker" data-image-picker>
+  {% if picker_items|length > 6 %}
+    <input class="input" type="search" placeholder="Найти образ по названию" aria-label="Найти образ" data-image-search>
+  {% endif %}
+  <div class="image-list" role="radiogroup">
+    {% for item in picker_items %}
+      {% set title = item.title or item.name %}
+      <label class="image-option" data-search="{{ (title ~ ' ' ~ item.name ~ ' ' ~ (item.system or ''))|lower }}">
+        <input type="radio" name="{{ picker_name }}" value="{{ item.path }}" data-label="{{ title }}" data-os="{{ item.os_type or '' }}" data-login="{{ item.login or '' }}" {% if picker_selected == item.path or (not picker_selected and loop.first) %}checked{% endif %}>
+        <span class="image-option-body">
+          <span class="list-icon brand">{{ icon(picker_icon) }}</span>
+          <span class="grow">
+            <span class="image-title">{{ title }}</span>
+            <span class="image-meta">{% if item.title %}{{ item.name }} · {% endif %}{{ item.size_label or item.size }}{% if item.date_label %} · загружен {{ item.date_label }}{% endif %}</span>
+          </span>
+          {% if item.system %}<span class="tag">{{ item.system }}</span>{% endif %}
+          <span class="option-check"></span>
+        </span>
+      </label>
+    {% endfor %}
+  </div>
+  <p class="subtle small" data-image-empty hidden>Образов с таким названием нет.</p>
+</div>