{% block components %}
{% set title = "CCTV Manhole Report / Inspection: " ~ (inspection.header.location.manhole_node_reference if inspection.header.location.manhole_node_reference else "") %}
{% include "wrc/manhole/page_title.html" %}

<div class="column">
  <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.name_of_surveyor %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.name_of_surveyor }}</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.name_of_surveyor %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.name_of_surveyor }}</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.manhole.year_constructed %}
        <p class="m-0 font-semibold">{{ inspection.header.manhole.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">{% if inspection.header.survey.requested_by %}{{ inspection.header.survey.requested_by }}{% endif %}</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="row w-full">
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0">
        <p class="m-0">Road: 
          {% if inspection.header.location.location_street_name %}
          <span class="font-semibold">{{ inspection.header.location.location_street_name }}</span>
          {% endif %}
        </p>
        <p class="m-0">Place: 
          {% if inspection.header.location.location_town_or_village %}
          <span class="font-semibold">{{ inspection.header.location.location_town_or_village }}</span>
          {% endif %}
        </p>
        <p class="m-0">Location Details: 
          {% if inspection.header.location.location_details %}
          <span class="font-semibold">{{ inspection.header.location.location_details }}</span>
          {% endif %}
        </p>
        <p class="m-0">Location Code: 
          {% if inspection.header.location.location_type_code %}
          <span class="font-semibold">{{ inspection.header.location.location_type_code.label }}</span>
          {% endif %}
        </p>
      </div>
    </div>
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0 border-left-0">
        <p class="m-0">Chamber Size: 
          {% if inspection.header.manhole.chamber_size %}
          <span class="font-semibold">{{ inspection.header.manhole.chamber_size }}</span>
          {% endif %}
        </p>
        <p class="m-0">Material: 
          {% if inspection.header.manhole.material %}
          <span class="font-semibold">{{ inspection.header.manhole.material.label }}</span>
          {% endif %}
        </p>
        <p class="m-0">Shape: 
          {% if inspection.header.manhole.shape_of_access %}
          <span class="font-semibold">{{ inspection.header.manhole.shape_of_access.label }}</span>
          {% endif %}
        </p>
        <p class="m-0">Project Ref No: 
          {% if inspection.header.survey.project_reference_number %}
          <span class="font-semibold">{{ inspection.header.survey.project_reference_number }}</span>
          {% endif %}
        </p>
      </div>
    </div>
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0 border-left-0">
        <p class="m-0">Cover Size: 
          {% if inspection.header.manhole.breadth_of_cover and inspection.header.manhole.width_of_cover %}
          <span class="font-semibold">{{inspection.header.manhole.breadth_of_cover}}×{{ inspection.header.manhole.width_of_cover }}</span>
          {% elif inspection.header.manhole.breadth_of_cover %}
          <span class="font-semibold">{{inspection.header.manhole.breadth_of_cover}}</span>
          {% elif inspection.header.manhole.width_of_cover %}
          <span class="font-semibold">{{ inspection.header.manhole.width_of_cover }}</span>
          {% endif %}
        </p>
        <p class="m-0">Material: 
          {% if inspection.header.manhole.material_of_cover %}
          <span class="font-semibold">{{ inspection.header.manhole.material_of_cover.label }}</span>
          {% endif %}
        </p>
        <p class="m-0">Shape: 
          {% if inspection.header.manhole.shape_of_cover %}
          <span class="font-semibold">{{ inspection.header.manhole.shape_of_cover.label }}</span>
          {% endif %}
        </p>
      </div>
    </div>
  </div>
  <div class="row w-full">
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0">
        <p class="m-0">Cover Good Condition: 
          {% if inspection.header.manhole.cover_good_condition %}
          <span class="font-semibold">{{ inspection.header.manhole.cover_good_condition.label }}</span>
          {% endif %}
        </p>
        <p class="m-0">Frame Good Condition: 
          {% if inspection.header.manhole.frame_good_condition %}
          <span class="font-semibold">{{ inspection.header.manhole.frame_good_condition.label }}</span>
          {% endif %}
        </p>
        <p class="m-0">Water Level: 
          {% if inspection.header.manhole.water_level %}
          <span class="font-semibold">{{ inspection.header.manhole.water_level }}%</span>
          {% endif %}
        </p>
        <p class="m-0">Channel Level: 
          {% if inspection.header.manhole.channel_level %}
          <span class="font-semibold">{{ inspection.header.manhole.channel_level }}%</span>
          {% endif %}
        </p>
      </div>
    </div>
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0 border-left-0">
        <p class="m-0">DVD Number: 
          <span class="font-semibold"></span>
        </p>
        <p class="m-0">Catchment: 
          {% if inspection.header.location.drainage_area %}
          <span class="font-semibold">{{ inspection.header.location.drainage_area }}</span>
          {% endif %}
        </p>
        <p class="m-0">SIP Depth: 
          {% if inspection.header.measurements.sip_depth %}
          <span class="font-semibold">{{ inspection.header.measurements.sip_depth }}</span>
          {% endif %}
        </p>
        <p class="m-0">CCTV Depth: 
          {% if inspection.header.measurements.cctv_depth %}
          <span class="font-semibold">{{ inspection.header.measurements.cctv_depth }}</span>
          {% endif %}
        </p>
      </div>
    </div>
    <div class="row w-33">
      <div class="w-full text-left font-small box h-3 border-top-0 border-left-0">
      </div>
    </div>
  </div>
  <div class="row w-full">
    <div class="w-full text-left font-small box border-top-0">
      <p class="m-0">Remarks: 
        {% if inspection.header.general_remarks %}
        <span class="font-semibold">{{ inspection.header.general_remarks }}</span>
        {% endif %}
      </p>
    </div>
  </div>
</div>
{% include "wrc/manhole/pipe_connections_and_defects.html" %}
{% endblock %}