{% extends "base.html" %}

{% block title %}{{ session_id | short_id }}… — {{ project }} — Fenn Dashboard{% endblock %}

{% block breadcrumb %}
<a href="/">Overview</a>
<span class="breadcrumb-sep">›</span>
<a href="/project/{{ project | urlencode }}">{{ project }}</a>
<span class="breadcrumb-sep">›</span>
<span class="breadcrumb-current">{{ session_id | short_id }}…</span>
{% endblock %}

{% block content %}

<!-- Hidden element for JS auto-refresh -->
<span id="session-status"
      data-status="{{ status }}"
      data-project="{{ project }}"
      data-session="{{ session_id }}"
      style="display:none;"></span>

<!-- Header -->
<div class="page-header">
  <h1 class="page-title" style="font-family:var(--font-mono); font-size:18px; letter-spacing:0;">
    {{ session_id }}
    {% if status == 'crashed' %}
    <span class="badge badge-crashed" style="font-size:12px; margin-left:8px; vertical-align:middle;">crashed</span>
    {% elif status == 'running' %}
    <span class="badge badge-running" style="font-size:12px; margin-left:8px; vertical-align:middle;">
      <span class="pulse-dot"></span>running
    </span>
    {% elif status == 'failed' %}
    <span class="badge badge-failed" style="font-size:12px; margin-left:8px; vertical-align:middle;">failed</span>
    {% else %}
    <span class="badge badge-completed" style="font-size:12px; margin-left:8px; vertical-align:middle;">completed</span>
    {% endif %}
  </h1>
</div>

<!-- Meta row -->
<div class="meta-row">
  {% if started %}
  <div class="meta-item">⏱ Started: <strong>{{ started }}</strong></div>
  {% endif %}
  {% if ended %}
  <div class="meta-item">⏹ Ended: <strong>{{ ended }}</strong></div>
  {% endif %}
  {% if duration_s is not none %}
  <div class="meta-item">⌛ Duration: <strong>{{ duration_s | duration }}</strong></div>
  {% endif %}
  <div class="meta-item">📄 Entries: <strong>{{ entry_count }}</strong></div>
  {% if warning_count > 0 %}
  <div class="meta-item" style="color:var(--warning);">
    ⚠ Warnings: <strong>{{ warning_count }}</strong>
  </div>
  {% endif %}
  {% if exception_count > 0 %}
  <div class="meta-item" style="color:var(--error);">
    ✕ Exceptions: <strong>{{ exception_count }}</strong>
  </div>
  {% endif %}
  <div class="meta-item" style="margin-left:auto;">
    <a href="javascript:void(0)"
       onclick="navigator.clipboard.writeText('{{ file_path }}')"
       class="btn btn-sm"
       title="Copy file path">⧉ Copy path</a>
  </div>
</div>

<!-- Config -->
{% if config %}
<div class="card" style="margin-bottom:20px;">
  <div class="card-header">
    <span class="card-title">⚙ Configuration</span>
    <button class="collapsible-btn"
            data-target="config-body"
            aria-expanded="true">
      <span class="arrow">▼</span> collapse
    </button>
  </div>
  <div id="config-body" class="collapsible-body">
    <div class="card-body">
      <div class="config-grid">
        {% for key, val in config.items() %}
        <div class="config-item">
          <span class="config-key">{{ key }}</span>
          <span class="config-sep">=</span>
          <span class="config-val">{{ val }}</span>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Log entries -->
<div class="card">
  <div class="log-entries">
    {% if entries %}
      {% for entry in entries %}
      <div class="log-entry level-{{ entry.level }} kind-{{ entry.kind }}"
           data-level="{{ entry.level }}"
           data-kind="{{ entry.kind }}">
        <span class="log-ts">{{ entry.ts }}</span>
        <span class="log-kind">
          <span class="badge badge-{{ entry.kind }}" style="font-size:10px;">{{ entry.kind }}</span>
        </span>
        <span class="log-level">
          <span class="badge badge-{{ entry.level }}" style="font-size:10px;">{{ entry.level }}</span>
        </span>
        <span class="log-msg">{{ entry.message }}</span>
      </div>
      {% endfor %}
    {% else %}
    <div class="empty" style="padding:40px 20px;">
      <div class="empty-title">No log entries</div>
      <div class="empty-desc">This session has no recorded entries yet.</div>
    </div>
    {% endif %}
  </div>
</div>

{% endblock %}