{% 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 : Manhole ID: " ~ (inspection.header.location.access_point_no if inspection.header.location.access_point_no else "") %}
    {% set border_bottom = false %}
    {% set border_top = false %}
    {% include "nassco/macp/page_title.html" %}
    
    <div class="row w-full">
      <div class="box font-small flex-1 text-center h-2">
        <p class="m-0">Place:</p>
        {% if inspection.header.location.city %}
        <p class="m-0 font-semibold">{{ inspection.header.location.city }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-2 text-center border-left-0 h-2">
        <p class="m-0">Road:</p>
        {% if inspection.header.location.street %}
        <p class="m-0 font-semibold">{{ inspection.header.location.street }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-1 text-center border-left-0 h-2">
        <p class="m-0">Date <span class="font-extra-small">(YYYY/MM/DD)</span>:</p>
        {% if inspection.header.survey.survey_date %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.survey_date.strftime("%Y/%m/%d") }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-1 text-center border-left-0 h-2">
        <p class="m-0">Camera:</p>
        {% if inspection.header.survey.inspection_technology and inspection.header.survey.inspection_technology.label %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.inspection_technology.label }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-2 text-center border-left-0 h-2">
        <p class="m-0">Operator:</p>
        {% if inspection.header.survey.surveyed_by %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.surveyed_by }}</p>
        {% endif %}
      </div>
    </div>

    <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 {% if loop.last %}h-50{% else %}h-45{% endif %}" 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">
              Photo: {{ image_prefix }}{{ i + 1 }}.png{% if observation.video_ref %}, {{ observation.video_ref }}{% endif %}
            </p>
            <p class="m-0 font-small">
              {% if observation.distance is not none %}{{ observation.distance }}{{ measurement_units }}{% endif %}{% if observation.code and observation.code.full_name %}, {{ observation.code.label }}{% endif %}{% if observation.component %}, {{ observation.component.full_name }}{% 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 %}