<!-- Preview Part -->
<div class="row col-12 justify-content-center px-0" style="">
  <div class="mt-3 col-12"></div>

  <!-- Orignal Image -->
  <div class="col-12 col-xl-6 mb-3">
    <div style="position: relative">
      <div class="justify-content-end d-flex my-2" style="z-index: 1; width: 100%; position: absolute;">
        {% include 'FrameControls.html' %}
      </div>

      <span class="mb-2 mr-2 px-2 py-1 badge badge-light status-badge"
        style="position: absolute; bottom: 0; right: 0; ">image</span>
      <span class="mb-2 ml-2 px-2  pixel-value-indicator" style="position: absolute; bottom: 0; left: 0;"></span>
      <img id="frame-zoom-img" class="zoom-image" src="https://via.placeholder.com/500x500?text=image+preview"
        alt="image preivew"
        style="width: 100%; image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated;">
    </div>
  </div>

  <!-- Mask Image -->
  <div class="col-12 col-xl-6 mb-3">
    <div style="position: relative;">
      <div class="justify-content-end d-flex my-2" style="z-index: 1; width: 100%; position: absolute;">
        {% include 'MaskControls.html' %}
      </div>

      <span class="mb-2 mr-2 px-2 py-1 badge badge-light status-badge"
        style="position: absolute; bottom: 0; right: 0;">CR mask</span>
      <span class="mb-2 ml-2 px-2  pixel-value-indicator" style="position: absolute; bottom: 0; left: 0;"></span>
      <img id="mask-zoom-img" class="zoom-image" src="https://via.placeholder.com/500x500?text=CR+mask+preivew"
        alt="CR mask preview"
        style="width: 100%; image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated;">
    </div>
  </div>

</div>