{{ define "async-image-item" }}
  <picture id="picture-{{ .ID }}" class="no-margin" data-thumbnail data-alt="Thumbnail of {{ .URL }}" data-icon="{{ iconFromExtension . }}">
    <noscript>
      <img class="thumbnail full block" src="{{ .URL }}?thumbnail" alt="Thumbnail of {{ .URL }}" loading="lazy">
    </noscript>
  </picture>
{{ end }}

{{ define "async-image-item-large" }}
  <picture id="picture-{{ .ID }}" class="no-margin" data-thumbnail data-alt="Thumbnail of {{ .URL }}" data-src="{{ .URL }}?thumbnail&scale=large" data-icon="{{ iconFromExtension . }}">
    <noscript>
      <img class="thumbnail full block" src="{{ .URL }}?thumbnail&scale=large" alt="Thumbnail of {{ .URL }}" loading="lazy">
    </noscript>
  </picture>
{{ end }}

{{ define "async-image" }}
  <style type="text/css" nonce="{{ .nonce }}">
    .thumbnail {
      max-height: 100%;
      vertical-align: middle;
      width: 100%;
    }
  </style>

  <script type="text/javascript" nonce="{{ .nonce }}">
    // from https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp
    async function isWebPCompatible() {
      const animatedImage = 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA';

      return new Promise((resolve, reject) => {
        var image = new Image();
        image.onload = () => {
          if (image.width > 0 && image.height > 0) {
            resolve();
          } else {
            reject();
          }
        };

        image.onerror = reject;
        image.src = `data:image/webp;base64,${animatedImage}`;
      });
    }

    /**
     * Restore default layout when no thumbnail is possible.
     */
    function displayNoThumbnail(picture) {
      const span = document.createElement('span');
      span.classList.add('filename', 'ellipsis');
      span.innerHTML = picture.alt.replace("Thumbnail of ", "");
      picture.after(span)

      picture.src = `{{ url "/svg/" }}${picture.dataset.icon}?fill=aliceblue`;
      picture.classList.add('icon', 'icon-large');
      picture.alt = 'Image file';
    }

    // From https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/read#example_2_-_handling_text_line_by_line
    async function* readLineByLine(response) {
      const utf8Decoder = new TextDecoder('utf-8');
      const reader = response.body.getReader();
      let { value: chunk, done: readerDone } = await reader.read();
      chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : '';

      let re = /\r\n|\n|\r/gm;
      let startIndex = 0;

      for (;;) {
        const result = re.exec(chunk);
        if (!result) {
          if (readerDone) {
            break;
          }

          const remainder = chunk.substr(startIndex);
          ({ value: chunk, done: readerDone } = await reader.read());
          chunk = remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : '');
          startIndex = re.lastIndex = 0;
          continue;
        }

        yield chunk.substring(startIndex, result.index);
        startIndex = re.lastIndex;
      }

      if (startIndex < chunk.length) {
        yield chunk.substr(startIndex);
      }
    }

    /**
     * Async image loading
     */
    async function fetchThumbnail() {
      fetchURL = document.location.search
      if (fetchURL.includes('?')) {
        fetchURL += "&thumbnail"
      } else {
        fetchURL += "?thumbnail"
      }

      const response = await fetch(fetchURL, { credentials: 'same-origin' });

      if (response.status >= 400) {
        throw new Error('unable to load thumbnails');
      }

      for await (let line of readLineByLine(response)) {
        const parts = line.split(',');
        if (parts.length != 2) {
          console.error('invalid line for thumbnail:', line);
          continue;
        }

        const picture = document.getElementById(`picture-${parts[0]}`);
        if (!picture) {
          continue;
        }

        const img = new Image();
        img.src = `data:image/webp;base64,${parts[1]}`;
        img.alt = picture.dataset.alt;
        img.dataset.src = picture.dataset.src;
        img.classList.add('thumbnail', 'full', 'block');

        replaceContent(picture, img);
      }
    }

    window.addEventListener(
      'load',
      async () => {
        const thumbnailsElem = document.querySelectorAll('[data-thumbnail]');
        if (!thumbnailsElem) {
          return;
        }

        try {
          await isWebPCompatible();
        } catch (e) {
          console.error('Your browser is not compatible with WebP format.', e);
          thumbnailsElem.forEach(displayNoThumbnail);
          return;
        }

        thumbnailsElem.forEach((picture) => {
          replaceContent(picture, generateThrobber(['throbber-white']));
        });

        try {
          await fetchThumbnail();
          window.dispatchEvent(new Event('thumbnail-done'))
        } catch (e) {
          console.error(e);
        }
      },
      false,
    );
  </script>
{{ end }}