{% from "_json_value.html" import render_json %}
<div class="flex flex-col h-full">
  <div class="flex-shrink-0">
    <h1 class="text-2xl font-bold my-4">{{ observation.name }}</h1>

    <p class="mb-2">
      <span class="text-base-content/60 text-sm">id:</span>
      <kbd data-testid="ObservationId" class="kbd kbd-sm">{{ observation.id }}</kbd>
    </p>
    <p class="mb-2">
      <span class="text-base-content/60 text-sm">created:</span>
      {{ observation.created_at }}
    </p>

    {% if observation.source %}
      <p class="mb-2">
        <span class="text-base-content/60 text-sm">source:</span>
        <kbd class="kbd kbd-sm"
          ><span data-testid="ObservationSourceFile">{{ observation.source.file }}</span>:<span
            data-testid="ObservationSourceLine"
            >{{ observation.source.line }}</span
          ></kbd
        >
      </p>
    {% endif %}
    {% if observation.parent_span_id %}
      <p class="mb-2">
        <span class="text-base-content/60 text-sm">parent span:</span>
        <kbd class="kbd kbd-sm">{{ observation.parent_span_id }}</kbd>
      </p>
    {% endif %}
    {% if observation.labels %}
      <p data-testid="ObservationLabels" class="mb-2">
        <span class="text-base-content/60 text-sm">labels:</span>
        {{ observation.labels|join(", ") }}
      </p>
    {% endif %}
    {% if observation.metadata %}
      <h3 data-testid="ObservationMetadataHeader" class="text-base font-bold my-2">metadata</h3>
      <ul data-testid="ObservationMetadata" class="list-none">
        {% for item in observation.metadata | items %}
          <li data-testid="ObservationMetadataItem" class="my-2">
            <span data-testid="ObservationMetadataKey">{{ item[0] }}</span>:
            <span data-testid="ObservationMetadataValue">{{ item[1] }}</span>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    <div class="divider"></div>

    <h2 class="text-xl font-bold my-4">payload</h2>
    <p class="mb-2">
      <span class="text-base-content/60 text-sm">type:</span>
      {{ observation.mime_type }}
    </p>
    <p class="mb-2">
      <span class="text-base-content/60 text-sm">size:</span>
      {{ observation.payload_size }} bytes
    </p>
    <p class="mb-2">
      <a
        href="/api/exe/{{ observation.execution_id }}/obs/{{ observation.id }}/content"
        target="_blank"
        rel="noopener noreferrer"
        class="link"
        >Open raw content in new tab</a
      >
    </p>
  </div>

  {% if observation.payload_size > display_threshold %}
    <div class="flex-grow">
      <p data-testid="ObservationPayload">Payload is too large to display inline.</p>
    </div>
  {% elif observation.payload.Markdown is defined %}
    <div data-testid="ObservationPayload" class="markdown-body">
      {{ observation.payload.Markdown.raw|render_markdown|safe }}
    </div>
  {% elif observation.payload.Json is defined %}
    <div data-testid="ObservationPayload" class="json-body">
      {{ render_json(observation.payload.Json) }}
    </div>
  {% elif observation.payload.Text is defined %}
    <pre data-testid="ObservationPayload">{{ observation.payload.Text|unescape }}</pre>
  {% elif observation.payload.Pointer is defined %}
    <div data-testid="ObservationPayload">
      <p class="mb-2">Payload stored externally.</p>
      <a href="{{ observation.payload.Pointer.url }}" target="_blank" class="link"
        >Load external content</a
      >
    </div>
  {% elif observation.payload.InlineBinary is defined %}
    <pre data-testid="ObservationPayload">
[Binary content - {{ observation.payload_size }} bytes]</pre
    >
  {% else %}
    <pre data-testid="ObservationPayload">[Unknown payload type]</pre>
  {% endif %}
</div>