{% block pipe_connections_and_defects %}
<div class="column">
  <table class="mt-1 w-full text-center">
    <thead>
      <tr>
        <th style="background-color: cadetblue;" class="font-small">No.</th>
        <th style="background-color: cadetblue;" class="font-small">Code</th>
        <th style="background-color: cadetblue;" class="font-small">Position</th>
        <th style="background-color: cadetblue;" colspan="2" class="font-small">Observation</th>
        <th style="background-color: cadetblue;" class="font-small">C1</th>
        <th style="background-color: cadetblue;" class="font-small">C2</th>
        <th style="background-color: cadetblue;" class="font-small">Q1</th>
        <th style="background-color: cadetblue;" class="font-small">Grade</th>
        <th style="background-color: cadetblue;" class="font-small" style="width: 100px;">Remarks</th>
        <th style="background-color: cadetblue;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="16px" height="16px" viewBox="0 -2 32 32" version="1.1">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-258.000000, -467.000000)" fill="#000000">
                <path d="M286,471 L283,471 L282,469 C281.411,467.837 281.104,467 280,467 L268,467 C266.896,467 266.53,467.954 266,469 L265,471 L262,471 C259.791,471 258,472.791 258,475 L258,491 C258,493.209 259.791,495 262,495 L286,495 C288.209,495 290,493.209 290,491 L290,475 C290,472.791 288.209,471 286,471 Z M274,491 C269.582,491 266,487.418 266,483 C266,478.582 269.582,475 274,475 C278.418,475 282,478.582 282,483 C282,487.418 278.418,491 274,491 Z M274,477 C270.687,477 268,479.687 268,483 C268,486.313 270.687,489 274,489 C277.313,489 280,486.313 280,483 C280,479.687 277.313,477 274,477 L274,477 Z" id="camera" sketch:type="MSShapeGroup"></path>
              </g>
            </g>
          </svg>
        </th>
        <th style="background-color: cadetblue;">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="16px" height="16px" viewBox="0 -2 32 32" version="1.1">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-258.000000, -467.000000)" fill="#000000">
                <path d="M286,471 L283,471 L282,469 C281.411,467.837 281.104,467 280,467 L268,467 C266.896,467 266.53,467.954 266,469 L265,471 L262,471 C259.791,471 258,472.791 258,475 L258,491 C258,493.209 259.791,495 262,495 L286,495 C288.209,495 290,493.209 290,491 L290,475 C290,472.791 288.209,471 286,471 Z M274,491 C269.582,491 266,487.418 266,483 C266,478.582 269.582,475 274,475 C278.418,475 282,478.582 282,483 C282,487.418 278.418,491 274,491 Z M274,477 C270.687,477 268,479.687 268,483 C268,486.313 270.687,489 274,489 C277.313,489 280,486.313 280,483 C280,479.687 277.313,477 274,477 L274,477 Z" id="camera" sketch:type="MSShapeGroup"></path>
              </g>
            </g>
          </svg>
        </th>
        <th style="background-color: cadetblue;">
          <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16px" height="16px">
            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
            <g id="SVGRepo_iconCarrier">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="drop" fill="#000000" transform="translate(42.666667, 106.666667)">
                  <path d="M426.666667,4.26325641e-14 L426.666667,298.666667 L3.55271368e-14,298.666667 L3.55271368e-14,4.26325641e-14 L426.666667,4.26325641e-14 Z M85.3333333,234.666667 L42.6666667,234.666667 L42.6666667,256 L85.3333333,256 L85.3333333,234.666667 Z M384,234.666667 L341.333333,234.666667 L341.333333,256 L384,256 L384,234.666667 Z M170.666667,96 L170.666667,202.666667 L266.666667,149.333333 L170.666667,96 Z M85.3333333,170.666667 L42.6666667,170.666667 L42.6666667,192 L85.3333333,192 L85.3333333,170.666667 Z M384,170.666667 L341.333333,170.666667 L341.333333,192 L384,192 L384,170.666667 Z M85.3333333,106.666667 L42.6666667,106.666667 L42.6666667,128 L85.3333333,128 L85.3333333,106.666667 Z M384,106.666667 L341.333333,106.666667 L341.333333,128 L384,128 L384,106.666667 Z M85.3333333,42.6666667 L42.6666667,42.6666667 L42.6666667,64 L85.3333333,64 L85.3333333,42.6666667 Z M384,42.6666667 L341.333333,42.6666667 L341.333333,64 L384,64 L384,42.6666667 Z" id="Combined-Shape"></path>
                </g>
              </g>
            </g>
          </svg>
        </th>
      </tr>
    </thead>
    <tbody>
      {% for observation in inspection.observations %}
      <tr>
        <td class="font-small">{{ loop.index }}</td>
        <td class="font-small">{{ observation.code.abbreviation }}</td>
        <td class="font-small">{% if observation.distance or observation.distance == 0 %}{{ observation.distance }}{% endif %}</td>
        <td colspan="2" class="font-small" style="text-align: left">{{ observation.code.label }}{% if observation.component and observation.component.label %}, {{ observation.component.label }}{% endif %}</td>
        <td class="font-small">{% if observation.circumferential_location_from %}{{ observation.circumferential_location_from }}{% endif %}</td>
        <td class="font-small">{% if observation.circumferential_location_to %}{{ observation.circumferential_location_to }}{% endif %}</td>
        <td class="font-small">{% if observation.value_defect_percent %}{{ observation.value_defect_percent }}{% endif %}</td>
        <td class="font-small">{% if observation.severity %}{{ observation.severity }}{% endif %}</td>
        <td style="width: 150px;" class="font-small text-left">{% if observation.remarks %}{{ observation.remarks }}{% endif %}</td>
        <td>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="16px" height="16px" viewBox="0 -2 32 32" version="1.1">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-258.000000, -467.000000)" fill="#000000">
                <path d="M286,471 L283,471 L282,469 C281.411,467.837 281.104,467 280,467 L268,467 C266.896,467 266.53,467.954 266,469 L265,471 L262,471 C259.791,471 258,472.791 258,475 L258,491 C258,493.209 259.791,495 262,495 L286,495 C288.209,495 290,493.209 290,491 L290,475 C290,472.791 288.209,471 286,471 Z M274,491 C269.582,491 266,487.418 266,483 C266,478.582 269.582,475 274,475 C278.418,475 282,478.582 282,483 C282,487.418 278.418,491 274,491 Z M274,477 C270.687,477 268,479.687 268,483 C268,486.313 270.687,489 274,489 C277.313,489 280,486.313 280,483 C280,479.687 277.313,477 274,477 L274,477 Z" id="camera" sketch:type="MSShapeGroup"></path>
              </g>
            </g>
          </svg>
        </td>
        <td></td>
        <td></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="w-full box">
    <h2 class="text-center">Coverplates</h2>
  </div>
  <table class="w-full text-center">
    <thead>
      <tr>
        <th style="background-color: cadetblue;" class="font-small">No.</th>
        <th style="background-color: cadetblue;" class="font-small">Type</th>
        <th style="background-color: cadetblue;" class="font-small">Cover Shape</th>
        <th style="background-color: cadetblue;" class="font-small">Material</th>
        <th style="background-color: cadetblue;" class="font-small">Breadth/Width</th>
        <th style="background-color: cadetblue;" class="font-small">Ground Level</th>
        <th style="background-color: cadetblue;" class="font-small">Invert Level</th>
        <th style="background-color: cadetblue;" class="font-small">Class</th>
        <th style="background-color: cadetblue;" class="font-small">MH-ID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-small">1</td>
        <td class="font-small">
          {% if inspection.header.manhole.type_of_cover %}
          {{ inspection.header.manhole.type_of_cover.label }}
          {% endif %}
        </td>
        <td class="font-small">
          {% if inspection.header.manhole.shape_of_cover %}
          {{ inspection.header.manhole.shape_of_cover.label }}
          {% endif %}
        </td>
        <td class="font-small">
          {% if inspection.header.manhole.material_of_cover %}
          {{ inspection.header.manhole.material_of_cover.label }}
          {% endif %}
        </td>
        <td class="font-small">
          {% if inspection.header.manhole.breadth_of_cover %}
          {{ inspection.header.manhole.breadth_of_cover }}
          {% endif %}
          /
          {% if inspection.header.manhole.width_of_cover %}
          {{ inspection.header.manhole.width_of_cover }}
          {% endif %}
        </td>
        <td class="font-small">
          {% if inspection.header.measurements.ground_level %}
          {{ inspection.header.measurements.ground_level }}
          {% endif %}
        </td>
        <td class="font-small">
          {% if inspection.header.measurements.invert_level %}
          {{ inspection.header.measurements.invert_level }}
          {% endif %}
        </td>
        <td class="font-small"></td>
        <td class="font-small">
          {% if inspection.header.location.manhole_node_reference %}
          {{ inspection.header.location.manhole_node_reference }}
          {% endif %}
        </td>
      </tr>
    </tbody>
  </table>
  <div class="w-full box">
    <h2 class="text-center">Inlets/Outlets</h2>
  </div>
  <table class="w-full text-center">
    <thead>
      <tr>
        <th style="background-color: cadetblue;" class="font-small">No.</th>
        <th style="background-color: cadetblue;" class="font-small">Clock Position</th>
        <th style="background-color: cadetblue;" class="font-small">Type</th>
        <th style="background-color: cadetblue;" class="font-small">Shape</th>
        <th style="background-color: cadetblue;" class="font-small">Diameter/Width</th>
        <th style="background-color: cadetblue;" class="font-small">Depth to Invert</th>
        <th style="background-color: cadetblue;" class="font-small">Material</th>
        <th style="background-color: cadetblue;" class="font-small">From MH</th>
        <th style="background-color: cadetblue;" class="font-small">To MH</th>
        <th style="background-color: cadetblue;" class="font-small">Water Level(%)</th>
        <th style="background-color: cadetblue;" class="font-small">Channel Observation</th>
      </tr>
    </thead>
    <tbody>
    {% set seq = namespace(idx=0) %}
    {% for observation in inspection.observations %}
      {% if observation.code.abbreviation == "GP" and observation.component and (observation.component.abbreviation == "In" or observation.component.abbreviation == "Out") %}
      <tr>
        {% set seq.idx = seq.idx + 1 %}
        <td class="font-small">{{ seq.idx }}</td>
        <td class="font-small">{% if observation.circumferential_location_from %}{{ observation.circumferential_location_from }}{% endif %}</td>
        <td class="font-small">{% if observation.component %}{{ observation.component.abbreviation }}{% endif %}</td>
        <td class="font-small">{% if observation.shape_of_pipe_connection %}{{ observation.shape_of_pipe_connection }}{% endif %}</td>
        <td class="font-small">
          {% if observation.diameter_of_pipe_connection %}{{ observation.diameter_of_pipe_connection }}{% endif %}
          {% if observation.diameter_of_pipe_connection and observation.width_of_pipe_connection %}/{% endif %}
          {% if observation.width_of_pipe_connection %}{{ observation.width_of_pipe_connection }}{% endif %}
        </td>
        <td class="font-small">{% if observation.distance %}{{ observation.distance }}{% endif %}</td>
        <td class="font-small">{% if observation.material %}{{ observation.material.abbreviation }}{% endif %}</td>
        <td class="font-small">{% if observation.value_1st_dimension %}{{ observation.value_1st_dimension }}{% endif %}</td>
        <td class="font-small">{% if observation.value_2nd_dimension %}{{ observation.value_2nd_dimension }}{% endif %}</td>
        <td class="font-small">{% if observation.value_defect_percent %}{{ observation.value_defect_percent }}{% endif %}</td>
        <td class="font-small" style="text-align: left">{% if observation.remarks %}{{ observation.remarks }}{% endif %}</td>
      </tr>
      {% endif %}
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}