{% 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" style="min-height: 9.3in;">
      {% set title = "Inspection Report" %}
      {% set border_bottom = false %}
      {% set border_top = false %}
      <div class="title" style="width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">
        {{ title }}
      </div>
      {% include "nassco/pacp/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 class="row w-full" style="margin-top: 10px;padding-left: 25px;padding-right: 25px;">
            <div class="text-left font-extra-small font-semibold" style="width: 75px;">Distance ({{ measurement_units }})</div>
            <div class="text-left font-extra-small font-semibold" style="width: 40px;">Cont.</div>
            <div class="text-left font-extra-small font-semibold" style="width: 40px;">Code</div>
            <div class="text-left font-extra-small font-semibold" style="flex: 1; min-width: 200px; padding-right: 10px;">Observation</div>
            <div class="text-left font-extra-small font-semibold" style="width: 60px;">Video Ref.</div>
            <div class="text-left font-extra-small font-semibold" style="width: 55px;">Image Ref.</div>
            <div class="text-left font-extra-small font-semibold" style="width: 40px;">Grade</div>
          </div>
          <div class="row w-full" style="align-items: start; padding-left: 25px; padding-right: 25px;">
            <div class="text-left font-extra-small" style="width: 75px;">
              {% if observation.distance is not none %}
              {{ "%.2f"|format(observation.distance) }}
              {% endif %}
            </div>
            <div class="text-left font-extra-small" style="width: 40px;">
              {% if observation.continuous_defect %}
              {{ observation.continuous_defect }}
              {% endif %}
            </div>
            <div class="text-left font-extra-small" style="width: 40px;">
              {% if observation.code %}
              {{ observation.code }}
              {% endif %}
            </div>
            <div class="text-left font-extra-small" style="flex: 1; min-width: 200px; padding-right: 10px;padding-right: 10px;">
              {% if observation.pdf_observation_string %}
              {{ observation.pdf_observation_string }}
              {% endif %}
            </div>
            <div class="text-left font-extra-small" style="width: 60px;">
              {% if observation.video_ref %}
              {{ observation.video_ref }}
              {% endif %}
            </div>
            <div class="text-left font-extra-small" style="width: 55px;">
              {{ i + 1 }}.png
            </div>
            <div class="text-left font-extra-small" style="width: 40px;">
              {% if observation.severity %}
              {{ observation.severity }}
              {% endif %}
            </div>
          </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 %}