{% block inspection_pictures %}
{% set observations_per_page = 2 %}
{% set total_observations = inspection.observations|length %}
{% set total_pages = ((total_observations / observations_per_page) | round(0, 'ceil')) | int %}

{% for page_num in range(1, total_pages + 1) %}
<div style="page-break-before: always;">
  <div class="wrapper">
    {% set title = "Inspection Pictures /Inspection : Sewer ID: " ~ (inspection.header.pipe.pipeline_length_reference if inspection.header.pipe.pipeline_length_reference else "") %}
    {% set border_bottom = false %}
    {% set border_top = false %}
    {% include "wrc/mainline/page_title.html" %}
    {% include "wrc/mainline/inspection_pictures_header_row.html" %}

    <div class="container" style="height: 8.6in;">
      {% set start_index = (page_num - 1) * observations_per_page %}
      {% set end_index = start_index + observations_per_page if start_index + observations_per_page <= total_observations else total_observations %}
      
      {% for i in range(start_index, end_index) %}
        {% set observation = inspection.observations[i] %}
         <div class="column w-full h-45" style="padding: 0 10px 20px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
           {% if observation.annotated_frame %}
             <img
               style="width: 100%; height: 80%; object-fit: contain;" 
               src="{{ observation.annotated_frame }}" 
             />
           {% endif %}
           <div style="margin-top: 5px;">
              <p class="m-0 font-small">
                Photo: {{ image_prefix }}S{{ i + 1 }}.png{% if observation.video_ref %}, {{ observation.video_ref }}{% endif %}
              </p>
              <p class="m-0 font-small">
                {% if observation.distance is not none %}{{ "%.2f"|format(observation.distance) }} {{ measurement_units }}{% endif %}{% if observation.code %}, {{ observation.code.label }}{% endif %}
              </p>
           </div>
         </div>
        {% if not loop.last %}
        <hr style="margin: 10px 0; border: none; border-top: 2px solid #000;">
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}