
<h3>Series</h3>
        <div class="pre-whitespace multi-image-block"><b>Series:</b>
                {% for series in series_data %}
     <span class="series-block">
                        <span>
                            <span class="series-block-series-number">Series {{ forloop.counter }}:</span><br>
                                            <span>
            <span class='series-block-examination'>{{series|get_item:"series_description"}}</span><br/>
            <span class='series-block-thumbnail'>
              <img 
      crossorigin="anonymous"
      hx-request='{"noHeaders": true}'
      hx-get='{{series|get_item:"thumbnail"}}?sid={{cimar_sid}}'
      hx-on::after-request= 'event.detail.elt.src = event.detail.xhr.responseURL;'
      hx-trigger='load'
      hx-swap='none'
              src="" />
            </span><br/>
            <span class='series-block-image-number'>Images: <span class='series-block-image-number-count'>{{series|get_item:"image_count"}}</span></span>
            </span>
                        </span>
                    </span>

{% comment %} <button
  id='load-series-image'
  hx-request='{"noHeaders": true}'
  hx-get='{{series|get_item:"thumbnail"}}?sid={{cimar_sid}}'
  hx-on::after-request= 'console.log(event.detail.xhr); document.querySelector(".series-block-thumbnail img").src = event.detail.xhr.responseURL;'
  hx-trigger='load'
  hx-swap='none'>
  Load Series
</button> {% endcomment %}
                {% endfor %}
</div>