{{define "imagePicker"}}
<fieldset class="image-picker" data-image-picker data-max-images="4">
  <legend>Photos <span class="optional">(optional)</span></legend>
  <p id="{{.ID}}-hint" class="image-picker-hint">
    Add up to 4 JPEG, PNG, or WebP images. Each image can be up to 5 MB.
  </p>
  <div class="image-dropzone" data-image-dropzone>
    <input id="{{.ID}}" class="image-input" type="file" name="images"
      accept="image/jpeg,image/png,image/webp" multiple
      aria-describedby="{{.ID}}-hint {{.ID}}-status {{.ID}}-error"
      data-image-input>
    <label class="image-dropzone-label" for="{{.ID}}">
      <strong>Drop photos here</strong>
      <span>or click to browse</span>
    </label>
    <span id="{{.ID}}-status" class="image-picker-count" role="status"
      aria-live="polite" data-image-count>{{len .Images}} of 4</span>
  </div>
  <p id="{{.ID}}-error" class="image-picker-error" role="alert"
    data-image-error hidden></p>

  <div class="image-preview-list" data-image-list>
    {{range .Images}}
      <article class="image-preview" data-image-card data-existing-image>
        <div class="image-preview-media">
          <img src="{{.PublicURL}}" alt="" width="{{.Width}}" height="{{.Height}}">
          <span class="image-preview-tag">Saved</span>
        </div>
        <div class="image-preview-fields">
          <input type="hidden" name="existing_image_id" value="{{.ID}}">
          <label for="{{$.ID}}-description-{{.ID}}">
            Image description <span class="optional">(optional)</span>
          </label>
          <input id="{{$.ID}}-description-{{.ID}}" type="text"
            name="existing_image_description" maxlength="500"
            value="{{.Description}}" placeholder="What should people notice?">
          <button class="image-remove" type="button" data-remove-image
            aria-label="Remove image{{if .Description}}: {{.Description}}{{end}}">
            Remove
          </button>
        </div>
      </article>
    {{end}}
  </div>

  <template data-image-template>
    <article class="image-preview" data-image-card data-new-image>
      <div class="image-preview-media">
        <img alt="" data-image-preview>
        <span class="image-preview-tag">New</span>
      </div>
      <div class="image-preview-fields">
        <p class="image-preview-name" data-image-name></p>
        <label>
          Image description <span class="optional">(optional)</span>
          <input type="text" name="image_description" maxlength="500"
            placeholder="What should people notice?">
        </label>
        <button class="image-remove" type="button" data-remove-image
          aria-label="Remove selected image">
          Remove
        </button>
      </div>
    </article>
  </template>
  <noscript>
    <p class="image-picker-hint">Image previews and removal while editing require JavaScript.</p>
  </noscript>
</fieldset>
{{end}}

{{define "postImages"}}
{{if .Images}}
  <div class="post-image-grid post-image-grid-{{len .Images}}">
    {{range .Images}}
      <figure class="post-image">
        <img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
          alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
          loading="lazy" decoding="async">
        {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
      </figure>
    {{end}}
  </div>
{{end}}
{{end}}