{% extends "base.html" %}

{% block title %}Training Runs · Sparsifire{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-end mb-4">
  <div>
    <h6 class="text-uppercase text-muted mb-1 small ls-1">Training Center</h6>
    <h1 class="h3 mb-0">SAE Experiments</h1>
  </div>
  <a href="{% url 'sae:create_run' %}" class="btn-accent shadow-sm text-decoration-none">
    <i class="bi bi-plus-lg me-1"></i> New Experiment
  </a>
</div>

<div class="panel p-0 overflow-hidden">
  <div class="table-responsive">
    <table class="table table-custom mb-0 align-middle">
      <thead class="bg-dark bg-opacity-50">
        <tr>
          <th class="ps-4">Run ID</th>
          <th>Dataset</th>
          <th>Configuration</th>
          <th>Status</th>
          <th>Final Loss</th>
          <th>Created</th>
          <th class="text-end pe-4"></th>
        </tr>
      </thead>
      <tbody>
        {% for run in runs %}
          <tr>
            <td class="ps-4">
              <div class="d-flex align-items-center">
                <div class="rounded bg-dark p-2 border border-secondary border-opacity-25 me-3 text-center" style="width: 40px; height: 40px;">
                  <i class="bi bi-cpu text-accent"></i>
                </div>
                <div>
                  <a href="{% url 'sae:run_detail' pk=run.pk %}" class="text-white fw-medium d-block text-decoration-none">
                    Run #{{ run.id }}
                  </a>
                  <small class="text-muted" style="font-size: 0.75rem;">
                    {{ run.epochs }} epochs
                  </small>
                </div>
              </div>
            </td>

            <td>
              <span class="text-muted fw-medium">
                <i class="bi bi-database me-1 opacity-50"></i> {{ run.dataset.name }}
              </span>
            </td>

            <td>
              <span class="badge bg-dark border border-secondary border-opacity-25 text-muted fw-normal font-monospace">
                {{ run.expansion_factor }}x &middot; k={{ run.k_sparsity }} &middot; α={{ run.alpha_aux }}
              </span>
            </td>

            <td>
              <div class="d-flex align-items-center small fw-medium
                {% if run.status == 'completed' %}status-done
                {% elif run.status == 'failed' %}status-error
                {% elif run.status == 'running' %}status-pending
                {% else %}text-muted{% endif %}">
                
                <span class="badge-dot 
                  {% if run.status == 'queued' %}bg-secondary{% endif %}">
                </span>
                {{ run.get_status_display }}
              </div>
            </td>

            <td>
              {% if run.final_loss %}
                <span class="font-monospace text-white">{{ run.final_loss|floatformat:4 }}</span>
              {% else %}
                <span class="text-muted opacity-25">&mdash;</span>
              {% endif %}
            </td>

            <td class="text-muted font-monospace small">
              {{ run.created_at|date:"d M Y" }}
            </td>

            <td class="text-end pe-4">
              <a href="{% url 'sae:run_detail' pk=run.pk %}" class="btn btn-sm btn-ghost border-0 text-muted">
                <i class="bi bi-chevron-right"></i>
              </a>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="7" class="text-center py-5">
              <div class="mb-3 text-muted opacity-25">
                <i class="bi bi-clipboard-data" style="font-size: 3rem;"></i>
              </div>
              <p class="text-muted mb-3">No training runs found.</p>
              <a href="{% url 'sae:create_run' %}" class="btn-ghost text-decoration-none">Start your first experiment</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}