{% block pipe_connections %} {% set title = "Manhole Report / Inspection:
Manhole ID: " ~ (inspection.header.location.access_point_no if
inspection.header.location.access_point_no else "") %} {% set border_bottom =
True %} {% include "nassco/macp/page_title.html" %}

<div class="container" style="page-break-after: always">
  <div class="column">
    <div class="w-full box border-left-0 border-right-0 border-top-0">
      <h2 class="text-center">Pipe Connections</h2>
    </div>
    <table class="mt-1 w-full text-center">
      <thead>
        <tr>
          <td class="font-extra-small">Pipe No</td>
          <td class="font-extra-small">Clock Pos</td>
          <td class="font-extra-small">Rim to Invert</td>
          <td class="font-extra-small">Directions</td>
          <td class="font-extra-small">Material</td>
          <td class="font-extra-small">Shape</td>
          <td class="font-extra-small">Height</td>
          <td class="font-extra-small">Cond</td>
          <td class="font-extra-small">Seal Cond</td>
          <td class="font-extra-small">Pipe Type</td>
          <td class="font-extra-small">Struct ID</td>
          <td class="font-extra-small">Comment</td>
        </tr>
      </thead>
             <tbody>
         {% for connection in inspection.header.pipe_connections %}
         <tr>
           <td class="font-extra-small">{% if connection.pipe_number %}{{ connection.pipe_number }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.clock_position %}{{ connection.clock_position }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.rim_to_invert %}{{ connection.rim_to_invert }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.direction %}{{ connection.direction }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.material %}{{ connection.material }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.shape %}{{ connection.shape }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.height %}{{ connection.height }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.pipe_condition %}{{ connection.pipe_condition }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.pipe_seal_condition %}{{ connection.pipe_seal_condition }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.pipe_type %}{{ connection.pipe_type }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.structure_id %}{{ connection.structure_id }}{% endif %}</td>
           <td class="font-extra-small">{% if connection.pipe_comments %}{{ connection.pipe_comments }}{% endif %}</td>
         </tr>
         {% endfor %}
         
         {# Fill remaining rows to make total of 13 #}
         {% set remaining_rows = 13 - inspection.header.pipe_connections|length %}
         {% if remaining_rows > 0 %}
         {% for i in range(remaining_rows) %}
         <tr>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
           <td class="font-extra-small"></td>
         </tr>
         {% endfor %}
         {% endif %}
       </tbody>
    </table>
  </div>

  <div class="column mt-2">
    <div class="w-full box border-left-0 border-right-0">
      <h2 class="text-center">Manhole Component Defect Section</h2>
    </div>
    <table class="mt-1 w-full text-center">
      <thead>
        <tr>
          <td class="font-extra-small">Depth</td>
          <td class="font-extra-small">Video Ref</td>
          <td class="font-extra-small">Component</td>
          <td class="font-extra-small p-0 h-full" style="width: 64px;">
            <div
              class="py-1 border-bottom-1"
              style="
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              Code
            </div>
            <div
              style="
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              Group descriptor modifier
            </div>
          </td>
          <td class="font-extra-small" style="width: 70px;">Continuous Defect</td>
          <td class="font-extra-small">Severity</td>
          <td class="font-extra-small p-0 h-full" style="width: 86px;">
            <div
              class="border-bottom-1 py-1"
              style="
                height: 33.3%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              Value
            </div>
            <div class="row w-full" style="height: 66.7%">
              <div class="column border-right-1" style="width: 75%">
                <div class="border-bottom-1">Dimension</div>
                <div class="row w-full">
                  <div class="column border-right-1" style="width: 50%">
                    1st
                  </div>
                  <div class="column" style="width: 50%">2nd</div>
                </div>
              </div>
              <div class="column" style="width: 25%">%</div>
            </div>
          </td>
          <td class="font-extra-small">Joint</td>
          <td class="font-extra-small">Step</td>
          <td class="font-extra-small h-full p-0" style="width: 86px;">
            <div
              class="py-1 border-bottom-1"
              style="height: 50%; display: flex; align-items: center; justify-content: center;"
            >
              Circumferential location
            </div>
            <div style="display: flex; align-items: center; justify-content: center; height: 50%">
              <div class="border-right-1 py-1" style="width: 50%">
                At/From
              </div>
              <div class="py-1" style="width: 50%">To</div>
            </div>
          </td>
          <td class="font-extra-small">Remarks</td>
        </tr>
      </thead>
      <tbody>
        {% for observation in inspection.observations %}
        <tr>
          <td class="font-extra-small">{% if observation.distance or observation.distance == 0 %}{{ observation.distance }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.video_ref %}{{ observation.video_ref }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.component %}{{ observation.component.full_name }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.code %}{{ observation.code }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.continuous_defect %}{{ observation.continuous_defect }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.severity %}{{ observation.severity }}{% endif %}</td>
          <td class="font-extra-small p-0">
            <div class="row p-0 w-full" style="justify-content: center; align-items: center; height: 100%;">
              <div class="column border-right-1 py-1" style="width: 37.5%; height: 16px;">
                {% if observation.value_1st_dimension %}{{ observation.value_1st_dimension }}{% endif %}
              </div>
              <div class="column border-right-1 py-1" style="width: 37.5%; height: 16px;">
                {% if observation.value_2nd_dimension %}{{ observation.value_2nd_dimension }}{% endif %}
              </div>
              <div class="py-1" style="width: 25%; height: 16px;">
                {% if observation.value_defect_percent %}{{ observation.value_defect_percent }}{% endif %}
              </div>
            </div>
          </td>
          <td class="font-extra-small">{% if observation.joint %}{{ observation.joint }}{% endif %}</td>
          <td class="font-extra-small">{% if observation.step %}{{ observation.step }}{% endif %}</td>
          <td class="font-extra-small p-0">
            <div class="row p-0 w-full" style="justify-content: center; align-items: center; height: 100%;">
              <div class="column border-right-1 py-1" style="width: 50%">
                {% if observation.circumferential_location_from %}{{ observation.circumferential_location_from }}{% endif %}
              </div>
              <div class="py-1" style="width: 50%">
                {% if observation.circumferential_location_to %}{{ observation.circumferential_location_to }}{% endif %}
              </div>
            </div>
          </td>
          <td class="font-extra-small">{% if observation.remarks %}{{ observation.remarks }}{% endif %}</td>
        </tr>
        {% endfor %}

        {# Fill remaining rows to make total of 31 #}
        {% set remaining_rows = 31 - inspection.observations|length %}
        {% if remaining_rows > 0 %}
        {% for i in range(remaining_rows) %}
        <tr>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small p-0">
            <div class="row p-0 w-full" style="justify-content: center; align-items: center; height: 100%;">
              <div class="column border-right-1 py-1" style="width: 37.5%;"></div>
              <div class="column border-right-1 py-1" style="width: 37.5%;"></div>
              <div class="py-1" style="width: 25%;"></div>
            </div>
          </td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small"></td>
          <td class="font-extra-small p-0">
            <div class="row p-0 w-full" style="justify-content: center; align-items: center; height: 100%;">
              <div class="column border-right-1 py-1" style="width: 50%"></div>
              <div class="py-1" style="width: 50%"></div>
            </div>
          </td>
          <td class="font-extra-small"></td>
        </tr>
        {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
