<table style="width: 100%; border-collapse: collapse; border: 1px solid black;">
  <tr style="width: 100%;">
    <td class="box font-small text-center" style="width: 25%; vertical-align: top; word-break: break-all; overflow-wrap: break-word;">
      <p class="m-0">
        Project Ref No: 
      </p>
      <p class="m-0">
        {% if inspection.header.survey.work_order_number %}
        <span class="font-semibold">{{ inspection.header.survey.work_order_number }}</span>
        {% else %}
        <span class="font-semibold">N/A</span>
        {% endif %}
      </p>
    </td>
    <td class="box font-small text-center" style="width: 25%; border-left: 0; vertical-align: top; word-break: break-all; overflow-wrap: break-word;">
      <p class="m-0">
        Pipe Use: 
      </p>
      <p class="m-0">
        {% if inspection.header.pipe.pipe_use %}
        <span class="font-semibold">{{ inspection.header.pipe.pipe_use }}</span>
        {% else %}
        <span class="font-semibold">N/A</span>
        {% endif %}
      </p>
    </td>
    <td class="box font-small text-center" style="width: 25%; border-left: 0; vertical-align: top; word-break: break-all; overflow-wrap: break-word;">
      <p class="m-0">
        PO Number: 
      </p>
      <p class="m-0">
        {% if inspection.header.survey.po_number %}
        <span class="font-semibold">{{ inspection.header.survey.po_number }}</span>
        {% else %}
        <span class="font-semibold">N/A</span>
        {% endif %}
      </p>
    </td>
    <td class="box font-small text-center" style="width: 25%; border-left: 0; vertical-align: top; word-break: break-all; overflow-wrap: break-word;">
      <p class="m-0">
        Date (YYYY/MM/DD):
      </p>
      <p class="m-0">
        {% if inspection.header.survey.survey_date %}
        <span class="font-semibold">{{ inspection.header.survey.survey_date.strftime("%Y/%m/%d") }}</span >
        {% else %}
        <span class="font-semibold">N/A</span>
        {% endif %}
      </p>
    </td>
  </tr>
</table>
