{% 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">
    <div class="container">
      {% set title = t('labels.inspection_pictures') ~ " /" ~ t('reports.pacp.inspection') ~ " : " ~ (inspection.header.location.pipe_segment_reference if inspection.header.location.pipe_segment_reference else "") %}
      {% set border_bottom = false %}
      {% set border_top = false %}
      {% include "nassco/pacp/es/page_title.html" %}
      {% include "nassco/pacp/es/inspection_pictures_header_row.html" %}
      {% 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 mt-1 font-small text-left">
              Photo: {{ i + 1 }}.png{% if observation.video_ref %}, {{ observation.video_ref }}{% endif %}
            </p>
            <p class="m-0 font-small text-left">
              {% 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 %}