{% 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 = "CCTV Manhole Pictures / Inspection : Manhole ID: " ~ (inspection.header.location.manhole_node_reference if inspection.header.location.manhole_node_reference else "") %}
    {% set border_bottom = false %}
    {% set border_top = false %}
    {% include "wrc/manhole/page_title.html" %}
    
    <div class="row w-full">
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-1 h-2">
          <p class="m-0">Survey Date:</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="text-center font-small box flex-2 border-left-0 h-2">
          <p class="m-0">Work Order No.:</p>
          {% if inspection.header.survey.client_job_reference %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.client_job_reference }}</p>
          {% endif %}
        </div>
      </div>
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-2 border-left-0 h-2">
          <p class="m-0">Weather:</p>
          {% if inspection.header.survey.weather %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.weather.label }}</p>
          {% endif %}
        </div>
        <div class="text-center font-small box flex-2 border-left-0 h-2">
          <p class="m-0">Manhole GIS/ID:</p>
          {% if inspection.header.location.manhole_node_reference %}
          <p class="m-0 font-semibold">{{ inspection.header.location.manhole_node_reference }}</p>
          {% endif %}
        </div>
      </div>
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-2 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 class="text-center font-small box flex-2 border-left-0 h-2">
          <p class="m-0">Team Supervisor:</p>
          {% if inspection.header.survey.surveyed_by %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.surveyed_by }}</p>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="row w-full">
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-1 h-2 border-top-0">
          <p class="m-0">Start Time:</p>
          {% if inspection.header.survey.survey_time %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.survey_time.strftime("%H:%M") }}</p>
          {% endif %}
        </div>
        <div class="text-center font-small box flex-1 border-left-0 h-2 border-top-0">
          <p class="m-0">Year Comissioned:</p>
          {% if inspection.header.survey.year_constructed %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.year_constructed }}</p>
          {% endif %}
        </div>
      </div>
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-1 border-left-0 h-2 border-top-0">
          <p class="m-0">Camera:</p>
          {% if inspection.header.survey.method_of_inspection %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.method_of_inspection.label }}</p>
          {% endif %}
        </div>
        <div class="text-center font-small box flex-1 border-left-0 h-2 border-top-0">
          <p class="m-0">WRC Certified:</p>
          <p class="m-0 font-semibold">{% if inspection.header.survey.wrc_certified %}{{ inspection.header.survey.wrc_certified }}{% endif %}</p>
        </div>
      </div>
      <div class="row w-33 flex-1">
        <div class="text-center font-small box flex-1 border-left-0 h-2 border-top-0">
          <p class="m-0">Requested By:</p>
          <p class="m-0 font-semibold"></p>
        </div>
        <div class="text-center font-small box flex-1 border-left-0 h-2 border-top-0">
          <p class="m-0">Cleaned:</p>
          {% if inspection.header.survey.pre_cleaned %}
          <p class="m-0 font-semibold">{{ inspection.header.survey.pre_cleaned.label }}</p>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="container" style="height: 8.1in;">
      {% 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 }}M{{ 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.full_name }}{% 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 %}