{% block pipe_diagram %}
<div class="mt-1" style="padding: 0 8px;">
  <div class="row w-full" style="padding-left: 140px;">
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">{{ t('labels.position') }}</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">{{ t('labels.cont') }}</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">{{ t('labels.code') }}</div>
    <div class="text-left font-extra-small font-semibold" style="flex: 1; min-width: 200px; padding-right: 10px;">{{ t('labels.observations') }}</div>
    <div class="text-left font-extra-small font-semibold" style="width: 60px;">{{ t('labels.video') }}</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">{{ t('labels.photo') }}</div>
    <div class="text-left font-extra-small font-semibold" style="width: 40px;">{{ t('labels.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: 140px; 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: 40px;">
          {% 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_spanish %}
          {{ observation.pdf_observation_string_spanish }}
          {% 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: 40px;">
            {{ 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 %}