{% from "_nav_bar.html" import nav %}
{% from "_macros.html" import breadcrumbs %}
{% extends "base.html" %}
{% block title %}{% if observation %}{{ observation.name }}{% else %}Waiting for observation...{% endif %}{% endblock %}
{% block content %}
  {{ nav() }}
  <main class="p-8">
    <div
      id="observation-page"
      hx-get="/exe/{{ execution_id }}/obs/{{ observation_id }}"
      hx-trigger="every 2s"
      hx-select="#observation-page"
      hx-swap="innerHTML"
    >
      {% if observation %}
        {{
          breadcrumbs([
            {"href": "/", "text": "home"},
            {"href": "/exe", "text": "executions"},
            {"href": "/exe/" ~ observation.execution_id, "text": observation.execution_id},
            {"text": observation.name}
          ])
        }}
        {% include "_observation_content.html" %}
      {% else %}
        <div>
          {{
            breadcrumbs([
              {"href": "/", "text": "home"},
              {"href": "/exe", "text": "executions"},
              {"href": "/exe/" ~ execution_id, "text": execution_id},
              {"text": "waiting..."}
            ])
          }}

          <h1 class="text-2xl font-bold my-4 text-base-content/40">Waiting for observation...</h1>

          <p class="mb-2">
            <span class="text-base-content/60 text-sm">id:</span>
            <kbd class="kbd kbd-sm opacity-60">{{ observation_id }}</kbd>
          </p>
          <p class="text-base-content/60">
            This observation has not been received yet. The page will automatically refresh when
            data arrives.
          </p>
        </div>
      {% endif %}
    </div>
  </main>
{% endblock %}