{% extends "base.html" %}

{% block title %}Fenn Dashboard{% endblock %}

{% block breadcrumb %}
<span class="breadcrumb-current">Overview</span>
{% endblock %}

{% block content %}

<div class="page-header">
  <span class="page-tag">// overview</span>
  <h1 class="page-title">Dashboard</h1>
  <p class="page-subtitle">Browse and analyse your ML experiment logs.</p>
</div>

<!-- Stats -->
<div class="stats-grid">
  <div class="stat-card accent">
    <div class="stat-label">Projects</div>
    <div class="stat-value">{{ total_projects }}</div>
  </div>
  <div class="stat-card info">
    <div class="stat-label">Sessions</div>
    <div class="stat-value">{{ total_sessions }}</div>
  </div>
  <div class="stat-card warning">
    <div class="stat-label">Warnings</div>
    <div class="stat-value">{{ total_warnings }}</div>
  </div>
  <div class="stat-card error">
    <div class="stat-label">Exceptions</div>
    <div class="stat-value">{{ total_exceptions }}</div>
  </div>
  <div class="stat-card warning">
    <div class="stat-label">Crashed</div>
    <div class="stat-value">{{ crashed_sessions }}</div>
  </div>
</div>

{% if projects %}
<!-- Project cards -->
<div class="section-header">
  <span class="section-title">Projects</span>
</div>

<div class="project-grid" style="margin-bottom:32px;">
  {% for p in projects %}
  <a href="/project/{{ p.name | urlencode }}"
     class="project-card"
     data-searchable="{{ p.name }}">

    <div class="project-card-header">
      <span class="project-name">{{ p.name }}</span>
    </div>

    <div class="project-stats">
      <span class="project-stat">
        ◎ {{ p.session_count }} session{% if p.session_count != 1 %}s{% endif %}
      </span>
      {% if p.warning_count > 0 %}
      <span class="project-stat has-warning">⚠ {{ p.warning_count }}</span>
      {% endif %}
      {% if p.exception_count > 0 %}
      <span class="project-stat has-error">✕ {{ p.exception_count }}</span>
      {% endif %}
      {% if p.crashed_count > 0 %}
      <span class="project-stat has-crashed">⊘ {{ p.crashed_count }}</span>
      {% endif %}
    </div>

    {% if p.last_active %}
    <div class="project-last">Last active: {{ p.last_active }}</div>
    {% endif %}
  </a>
  {% endfor %}
</div>
{% endif %}

<!-- Recent sessions -->
{% if recent_sessions %}
<div class="section-header">
  <span class="section-title">Recent Sessions</span>
</div>

<div class="card">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Project</th>
          <th>Session ID</th>
          <th>Started</th>
          <th>Duration</th>
          <th>Status</th>
          <th>Entries</th>
          <th>Warnings</th>
          <th>Exceptions</th>
        </tr>
      </thead>
      <tbody>
        {% for s in recent_sessions %}
        <tr data-searchable="{{ s.project }} {{ s.session_id }}">
          <td>
            <a href="/project/{{ s.project | urlencode }}">{{ s.project }}</a>
          </td>
          <td>
            <a href="/session/{{ s.project | urlencode }}/{{ s.session_id | urlencode }}"
               class="td-mono">{{ s.session_id | short_id }}…</a>
          </td>
          <td class="td-mono">{{ s.started }}</td>
          <td class="td-mono">{{ s.duration_s | duration }}</td>
          <td>
            {% if s.status == 'crashed' %}
            <span class="badge badge-crashed">crashed</span>
            {% elif s.status == 'failed' %}
            <span class="badge badge-failed">failed</span>
            {% elif s.status == 'running' %}
            <span class="badge badge-running"><span class="pulse-dot"></span>running</span>
            {% else %}
            <span class="badge badge-completed">completed</span>
            {% endif %}
          </td>
          <td class="td-mono">{{ s.entry_count }}</td>
          <td class="td-mono {% if s.warning_count > 0 %}has-warning{% endif %}"
              style="{% if s.warning_count > 0 %}color:var(--warning){% endif %}">
            {{ s.warning_count if s.warning_count else '—' }}
          </td>
          <td class="td-mono {% if s.exception_count > 0 %}has-error{% endif %}"
              style="{% if s.exception_count > 0 %}color:var(--error){% endif %}">
            {{ s.exception_count if s.exception_count else '—' }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% else %}
<div class="empty">
  <div class="empty-icon">📂</div>
  <div class="empty-title">No log files found</div>
  <div class="empty-desc">
    Enable <code>logger.fnxml: true</code> in your <code>fenn.yaml</code> and run an
    experiment. Fenn will scan <code>./logger/</code>, <code>~/logger/</code>, and
    any paths in the <code>FENN_LOG_DIRS</code> environment variable.
  </div>
</div>
{% endif %}

{% endblock %}