{% 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>