{#
  Web image picker. Each result is a button that POSTs its URL to `post_url`;
  the server downloads and normalizes it, then returns the icon-status block
  that `status_target` points at.

  Thumbnails load straight from the search engine's CDN, so the browser talks
  to it directly — `referrerpolicy` keeps ImpTune's own URL out of that request.
#}
{% if hits %}
<p class="hint">
  <span x-data x-text="$store.i18n.t('image_results_for')">Results for</span>
  <span class="mono">{{ query }}</span>
</p>
<div class="image-grid">
  {% for h in hits %}
  <button type="button" class="image-option"
          hx-post="{{ post_url }}"
          hx-vals='{{ {"url": h.url} | tojson }}'
          hx-target="{{ status_target }}"
          hx-swap="innerHTML"
          title="{{ h.title }} — {{ h.source }}">
    <img src="{{ h.thumbnail }}" alt="" loading="lazy" referrerpolicy="no-referrer">
    <span class="image-meta mono">{{ h.width }}&times;{{ h.height }}</span>
  </button>
  {% endfor %}
</div>
<p class="hint" x-data x-text="$store.i18n.t('image_pick_hint')">Pick one — it is downloaded and resized to 256 × 256 PNG.</p>
{% else %}
<p class="dim" x-data x-text="$store.i18n.t('no_image_results')">No results. Try another search term.</p>
{% endif %}