{{/* One image field of the design form. The select lists the recent images
     (plus the chosen one) so it works without the script; with it the select is
     hidden and "Choose from library…" opens the shared panel at the end of
     design.html, which fetches the library page by page. */}}
{{define "imagepick"}}{{$cur := .current}}<div class="imagepick" data-name="{{.name}}">
  <label>{{.label}}</label>
  {{if .hint}}<p class="muted small">{{.hint}}</p>{{end}}
  <div class="pickrow">
    <span class="preview">{{if $cur}}<img src="/b/{{.sub}}/media/{{$cur}}" alt="">{{else}}<span class="swatch">&times;</span>{{end}}</span>
    <span class="pickctl">
      <select name="{{.name}}" class="nojs">
        <option value="none"{{if not $cur}} selected{{end}}>{{t "None"}}</option>
        {{range .images}}<option value="{{.ID}}"{{if eq .ID.String $cur}} selected{{end}}>{{.Filename}}</option>{{end}}
        {{if and $cur (not (index .names $cur))}}<option value="{{$cur}}" selected>{{t "Current image"}}</option>{{end}}
      </select>
      <span class="jsonly"><button type="button" class="secondary small" data-pick="open">{{t "Choose from library…"}}</button> <button type="button" class="secondary small" data-pick="clear">{{t "None"}}</button></span>
      <label class="upload">{{t "…or upload a new one"}}<br><input type="file" name="{{.name}}_file" accept="{{if .accept}}{{.accept}}{{else}}image/*{{end}}"></label>
    </span>
  </div>
</div>{{end}}