{% from "_nav_bar.html" import nav %}
{% from "_macros.html" import breadcrumbs %}
{% extends "base.html" %}
{% block title %}{% if execution %}
  {{ execution.name }}
{% else %}
  Waiting for execution...
{% endif %}{% endblock %}
{% block content %}
  <div class="h-screen grid grid-rows-[auto_1fr]">
    {{ nav() }}
    <div
      class="grid {% if selected_observation %}grid-cols-2{% else %}grid-cols-1{% endif %} overflow-hidden"
    >
      <main
        class="overflow-y-auto"
        id="execution-detail"
        hx-get="/exe/{{ execution_id }}"
        hx-trigger="every 2s"
        hx-select="#execution-detail > *"
        hx-swap="innerHTML"
      >
        {% if execution %}
          <div class="p-8">
            {{
              breadcrumbs([
                {"href": "/", "text": "home"},
                {"href": "/exe", "text": "executions"},
                {"text": execution.name}
              ])
            }}

            <h1 data-testid="ExecutionDetailTitle" class="text-2xl font-bold my-4">
              {{ execution.name }}
            </h1>

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

            {% if execution.metadata %}
              <h3 class="text-base font-bold my-2">metadata</h3>
              <ul class="list-none">
                {% for item in execution.metadata | items %}
                  <li class="my-2">{{ item[0] }}: {{ item[1] }}</li>
                {% endfor %}
              </ul>
            {% endif %}

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

            <div role="tablist" class="tabs tabs-box mb-4">
              <a
                href="/exe/{{ execution.id }}"
                data-testid="ViewTabLog"
                role="tab"
                class="tab {% if view == 'log' %}tab-active{% endif %}"
                >log</a
              >
              <a
                href="/exe/{{ execution.id }}/payload"
                data-testid="ViewTabPayload"
                role="tab"
                class="tab {% if view == 'payload' %}tab-active{% endif %}"
                >payload</a
              >
            </div>

            <h2 class="text-xl font-bold my-4">observations</h2>

            <div id="observations-list">
              {% if observations %}
                {% if view == 'log' %}
                  <div
                    class="font-mono text-sm bg-neutral-900 rounded border border-neutral-700 overflow-hidden"
                  >
                    {% for obs in observations %}
                      <a
                        data-testid="ObservationListItemLink"
                        href="{{ base_path }}?obs={{ obs.id }}"
                        class="block px-3 py-1.5 hover:bg-neutral-800 cursor-pointer border-b border-neutral-800 last:border-b-0 {% if selected_observation and selected_observation.id == obs.id %}bg-neutral-800{% endif %}"
                      >
                        <div data-testid="ObservationListItem" class="flex items-start gap-3">
                          <span class="text-neutral-500 shrink-0">{{ obs.created_at }}</span>
                          <span
                            class="shrink-0 w-14 text-right {% if obs.log_level == 'Error' %}text-error{% elif obs.log_level == 'Warning' %}text-warning{% elif obs.log_level == 'Info' %}text-info{% elif obs.log_level == 'Debug' %}text-success{% else %}text-neutral-500{% endif %}"
                            >{{ obs.log_level }}</span
                          >
                          <span class="text-neutral-400 shrink-0"
                            >{% if obs.source %}{{ obs.source.file }}:{{ obs.source.line }}{% else %}-{% endif %}</span
                          >
                          <span class="text-neutral-200 truncate"
                            >{% if obs.observation_type == 'LogEntry' %}
                              {% if obs.payload.Text is defined %}
                                {{ obs.payload.Text[:200] }}{% if obs.payload.Text|length > 200 %}...{% endif %}
                              {% elif obs.payload.Json is defined %}
                                [JSON]
                              {% elif obs.payload.Markdown is defined %}
                                {{ obs.payload.Markdown.raw[:200] }}{% if obs.payload.Markdown.raw|length > 200 %}...{% endif %}
                              {% elif obs.payload.Pointer is defined %}
                                [external content]
                              {% else %}
                                [binary]
                              {% endif %}
                            {% else %}
                              {{ obs.name }}:
                              {% if obs.payload.Text is defined %}
                                {{ obs.payload.Text[:100] }}{% if obs.payload.Text|length > 100 %}...{% endif %}
                              {% elif obs.payload.Json is defined %}
                                [JSON]
                              {% elif obs.payload.Markdown is defined %}
                                {{ obs.payload.Markdown.raw[:100] }}{% if obs.payload.Markdown.raw|length > 100 %}...{% endif %}
                              {% elif obs.payload.Pointer is defined %}
                                [external content]
                              {% else %}
                                [binary]
                              {% endif %}
                            {% endif %}</span
                          >
                        </div>
                      </a>
                    {% endfor %}
                  </div>
                {% else %}
                  <ul class="list-none">
                    {% for obs in observations %}
                      <li data-testid="ObservationListItem" class="my-2">
                        <a
                          data-testid="ObservationListItemLink"
                          href="{{ base_path }}?obs={{ obs.id }}"
                          class="link {% if selected_observation and selected_observation.id == obs.id %}font-bold{% endif %}"
                          >{{ obs.name }}</a
                        >
                        <span class="text-base-content/60 text-sm">
                          — {{ obs.mime_type }}
                          {% if obs.source %}— {{ obs.source.file }}:{{ obs.source.line }}{% endif %}
                          — {{ obs.created_at }}
                        </span>
                        {% if obs.labels %}
                          <br /><span class="text-base-content/60 text-sm"
                            >labels: {{ obs.labels|join(", ") }}</span
                          >
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
                {% if total_count %}
                  <div class="divider"></div>
                  <p data-testid="PaginationInfo" class="mb-2 text-base-content/60 text-sm">
                    showing {{ offset + 1 }}-{{ offset + observations|length }} of {{ total_count }}
                    (page {{ page }})
                  </p>
                  <div class="join">
                    <button
                      data-testid="PaginationPrev"
                      {% if offset > 0 %}onclick="window.location.href='{{ base_path }}?offset={{ offset - limit }}&limit={{ limit }}'"{% else %}disabled{% endif %}
                      class="join-item btn btn-sm btn-outline"
                    >
                      ← prev
                    </button>
                    <button
                      data-testid="PaginationNext"
                      {% if has_next_page %}onclick="window.location.href='{{ base_path }}?offset={{ offset + limit }}&limit={{ limit }}'"{% else %}disabled{% endif %}
                      class="join-item btn btn-sm btn-outline"
                    >
                      next →
                    </button>
                  </div>
                {% endif %}
              {% else %}
                <p>no observations found.</p>
              {% endif %}
            </div>
          </div>
        {% else %}
          <div class="p-8">
            {{
              breadcrumbs([
                {"href": "/", "text": "home"},
                {"href": "/exe", "text": "executions"},
                {"text": "waiting..."}
              ])
            }}

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

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

      {% if selected_observation %}
        <aside
          class="border-l border-base-300 p-8 overflow-y-auto bg-base-100 flex flex-col"
          id="side-panel"
        >
          <div class="flex-shrink-0">
            <a href="{{ base_path }}" class="block text-right text-xl mb-4 link no-underline">×</a>
          </div>
          <div id="side-panel-content" class="flex-grow min-h-0 flex flex-col">
            {% set observation = selected_observation %} {% include "_observation_content.html" %}
          </div>
        </aside>
      {% endif %}
    </div>
  </div>
{% endblock %}