{% block inspection_report %}
<div class="container border-top-0 border-bottom-0" style="position: relative; height: 9.2in;">
  {% set title = "Inspection Report" %}
  {% set border_bottom = true %}
  {% include "nassco/pacp/page_title.html" %}
  {% include "nassco/pacp/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">Road: 
            {% if inspection.header.location.street %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.street }}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">Place: 
            {% if inspection.header.location.city %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.location.city }}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">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>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">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>
            {% else %}
            <span class="font-semibold">N/A</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">MPEG File Name: 
            {% if video_name %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ video_name }}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">Catchment: 
            {% if inspection.header.location.drainage_area %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.location.drainage_area }}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">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>
            {% else %}
            <span class="font-semibold">N/A</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">US MH GIS-ID: 
            {% if 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>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">DS MH GIS-ID: 
            {% if 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>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">Length Surveyed: 
            {% if inspection.header.pipe.length_surveyed %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">
              {{ "%.2f"|format(inspection.header.pipe.length_surveyed) }} {{ measurement_units }}
            </span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p> 
          <p class="m-0">Total Length: 
            {% if inspection.header.pipe.total_length %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">
              {{ "%.2f"|format(inspection.header.pipe.total_length) }} {{ measurement_units }}
            </span>
            {% else %}
            <span class="font-semibold">N/A</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">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>
            {% else %}
            <span class="font-semibold">N/A</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">Purpose: 
            {% if inspection.header.survey.purpose_of_survey %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.survey.purpose_of_survey}}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">Pipe Size:
            {% 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>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">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>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
          <p class="m-0">Lining: 
            {% if inspection.header.pipe.lining_method %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ inspection.header.pipe.lining_method }}</span>
            {% else %}
            <span class="font-semibold">N/A</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">QSR: <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ pipe_ratings.qsr }}</span></p>
          <p class="m-0">QMR: <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ pipe_ratings.qmr }}</span></p>
          <p class="m-0">QOR: <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{ pipe_ratings.qor }}</span></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">Comment: 
            {% if inspection.header.additional_info %}
            <span class="font-semibold" style="word-break: break-all; overflow-wrap: break-word;">{{inspection.header.additional_info }}</span>
            {% else %}
            <span class="font-semibold">N/A</span>
            {% endif %}
          </p>
        </td>
      </tr>
    </tbody>
  </table>

  {% if diagram_pages %}
  {% set page = diagram_pages[0] %}
  {% set extra_space_before_diagram = false %}
  {% include "nassco/pacp/pipe_diagram.html" %}
  {% endif %}

  <!-- Show pipe ratings on first page only when there's a single diagram page -->
  {% if diagram_pages|length == 1 %}
    {% set extra_space_after_diagram = false %}
    {% include "nassco/pacp/pipe_ratings.html" %}
  {% endif %}
</div>
{% endblock %}