{% block inspection_report %}
<div class="container border-top-0" style="position: relative;">
  {% 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 = true %}
  {% include "nassco/pacp/es/page_title.html" %}
  {% include "nassco/pacp/es/inspection_report_header.html" %}
  <table class="w-full" style="border-collapse: collapse; width: 100%;">
    <tbody>
      <!-- First row -->
      <tr>
        <td class="text-left font-small box border-top-0 border-left-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.place') }} 
            {% if inspection.header.location.city %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.city }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.road') }} 
            {% if inspection.header.location.street %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.street }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.location_details') }} 
            {% if inspection.header.location.location_details %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.location_details }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.location_code') }} 
            {% if inspection.header.location.location_code %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.location_code.label }}</span>
            {% endif %}
          </p>
        </td>
        <td class="text-left font-small box border-top-0 border-left-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.dvd_no') }}</p>
          <p class="m-0">{{ t('labels.mpeg_file_name') }} 
            {% if video_name %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ video_name }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.project_ref_no') }} 
            {% if inspection.header.survey.work_order_number %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.survey.work_order_number }}</span>
            {% endif %}
          </p>
        </td>
        <td class="text-left font-small box border-top-0 border-left-0 border-right-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.us_mh_gis_id') }} 
            {% if inspection.header.survey.direction_of_survey.abbreviation == "U" and inspection.header.measurements.downstream_mh_number %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.measurements.downstream_mh_number }}</span>
            {% elif inspection.header.survey.direction_of_survey.abbreviation == "D" and inspection.header.measurements.upstream_mh_number %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.measurements.upstream_mh_number }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.ds_mh_gis_id') }} 
            {% if inspection.header.survey.direction_of_survey.abbreviation == "D" and inspection.header.measurements.downstream_mh_number %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.measurements.downstream_mh_number }}</span>
            {% elif inspection.header.survey.direction_of_survey.abbreviation == "U" and inspection.header.measurements.upstream_mh_number %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.measurements.upstream_mh_number }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.cctv_length') }} 
            {% if inspection.header.pipe.total_length %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">
              {{ inspection.header.pipe.total_length|string|replace('.', ',') }} {{ measurement_units }}
            </span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.sip_length') }} 
            {% if inspection.header.pipe.length_surveyed %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">
              {{ inspection.header.pipe.length_surveyed|string|replace('.', ',') }} {{ measurement_units }}
            </span>
            {% endif %}
          </p> 
        </td>
      </tr>
      <!-- Second row -->
      <tr>
        <td class="text-left font-small box border-top-0 border-left-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.direction_of_survey') }} 
            {% if inspection.header.survey.direction_of_survey %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.survey.direction_of_survey.label }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.upstream_water_level') }}</p>
          <p class="m-0">{{ t('labels.downstream_water_level') }}</p>
        </td>
        <td class="text-left font-small box border-top-0 border-left-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.diameter') }}
            {% if inspection.header.pipe.height %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.pipe.height|int if inspection.header.pipe.height|int == inspection.header.pipe.height else inspection.header.pipe.height }} {{ pipe_size_units }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.pipe_material') }} 
            {% if inspection.header.pipe.material %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.pipe.material.label }}</span>
            {% endif %}
          </p>
          <p class="m-0">{{ t('labels.shape') }} 
            {% if inspection.header.pipe.shape %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.pipe.shape.label }}</span>
            {% endif %}
          </p>
        </td>
        <td class="text-left font-small box border-top-0 border-left-0 border-right-0" style="width: 33.33%; padding: 4px 8px; border: 1px solid #000; vertical-align: top;">
          <p class="m-0">{{ t('labels.aim') }}</p>
          <p class="m-0">{{ t('labels.covering') }}</p>
        </td>
      </tr>
      <!-- Third row - Comments -->
      <tr>
        <td colspan="3" class="text-left font-small box border-top-0 border-left-0 border-right-0" style="padding: 4px 8px; border: 1px solid #000;">
          <p class="m-0">{{ t('labels.comment') }} 
            {% if inspection.header.additional_info %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.additional_info }}</span>
            {% endif %}
          </p>
        </td>
      </tr>
    </tbody>
  </table>

  {% if diagram_pages %}
  {% set page = diagram_pages[0] %}
  {% set extra_space_before_diagram = false %}
  {% include "nassco/pacp/es/pipe_diagram.html" %}
  
  <!-- Additional content for single page case -->
  {% if diagram_pages|length == 1 %}
    {% set extra_space_after_diagram = true %}
    {% include "nassco/pacp/es/pipe_ratings.html" %}
  {% endif %}
  {% endif %}
</div>
{% endblock %}