{% block pipe_diagram %}
<div class="mt-1 px-2">
  <div class="row w-full" style="padding-left: 130px;">
    <div class="text-left font-extra-small font-semibold" style="width: 55px;">Distance ({{ measurement_units }})</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">Cont.</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">Code</div>
    <div class="text-left font-extra-small font-semibold" style="flex: 1; min-width: 200px; padding-right: 10px;">Observation</div>
    <div class="text-left font-extra-small font-semibold" style="width: 60px;">Video Ref.</div>
    <div class="text-left font-extra-small font-semibold" style="width: 55px;">Image Ref.</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">Grade</div>
  </div>
  <div class="row w-full" style="position: relative;">
    {% if page.diagram_path %}
    <img src="{{ direction_img }}" class="direction_img {% if extra_space_before_diagram %}subsequent{% endif %}">
    <img src="{{ page.diagram_path }}" class="{% if extra_space_before_diagram %}subsequent{% endif %} pipe_diagram">
    {% endif %}
    <div class="column w-full" style="padding-left: 130px; padding-top: 10px;">
      {% for observation in page.observations %}
      <div class="row w-full" style="height: 36px; align-items: start;">
        <div class="text-left font-extra-small" style="width: 55px;">
          {% if observation.distance is not none %}
          {{ "%.2f"|format(observation.distance) }}
          {% endif %}
        </div>
        <div class="text-left font-extra-small" style="width: 40px;">
          {% if observation.continuous_defect %}
          {{ observation.continuous_defect }}
          {% endif %}
        </div>
        <div class="text-left font-extra-small" style="width: 40px;">
          {% if observation.code %}
          {{ observation.code }}
          {% endif %}
        </div>
        <div class="text-left font-extra-small" style="flex: 1; min-width: 200px; padding-right: 10px;padding-right: 10px;">
          {% if observation.pdf_observation_string %}
          {{ observation.pdf_observation_string }}
          {% endif %}
        </div>
        <div class="text-left font-extra-small" style="width: 60px;">
          {% if observation.video_ref %}
          {{ observation.video_ref }}
          {% endif %}
        </div>
        <div class="text-left font-extra-small" style="width: 55px;">
            {{ loop.index0 + (page.start_index if page.start_index is defined else 0) + 1 }}.png
        </div>
        <div class="text-left font-extra-small" style="width: 40px;">
          {% if observation.severity %}
          {{ observation.severity }}
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}