{% extends "base.html" %}
{% block title %}Files — Experiment {{ exp_id }} — ABREKA{% endblock %}

{% block extra_css %}
.file-tree { font-family: var(--mono); font-size: 13px; }
.file-row { display: flex; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.file-row:hover { background: var(--primary-light); }
.file-name { flex: 1; }
.file-name a { color: var(--text); }
.file-name a:hover { color: var(--primary); }
.file-size { width: 80px; text-align: right; color: var(--muted); font-size: 12px; }
.file-label { width: 70px; text-align: right; font-size: 11px; color: var(--muted); }
.file-dir { font-weight: 600; }
.file-binary { opacity: 0.5; }
{% endblock %}

{% block content %}
<div class="breadcrumb">
  <a href="/">Dashboard</a> / <a href="/experiments">Experiments</a> / <a href="/experiments/{{ exp_id }}">{{ exp_id }}</a> / Files
</div>

<h1>Files — Experiment {{ exp_id }}</h1>

<div class="card mt-1">
  {% if entries %}
  <div class="file-tree">
    {% for e in entries %}
    <div class="file-row{% if e.is_binary %} file-binary{% endif %}" style="padding-left: {{ 8 + e.depth * 20 }}px;">
      <span class="file-name" title="{{ e.relative_path }}">
        {% if e.is_dir %}
          <span class="file-dir">{{ e.name }}/</span>
        {% elif e.is_binary and not e.is_image %}
          <span>{{ e.name }}</span>
        {% else %}
          <a href="/experiments/{{ exp_id }}/files/{{ e.relative_path }}">{{ e.name }}</a>
        {% endif %}
      </span>
      <span class="file-size">
        {% if not e.is_dir %}{{ e.size_bytes | filesize }}{% endif %}
      </span>
      <span class="file-label">
        {% if e.is_binary %}(binary){% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-muted">No files found.</p>
  {% endif %}
</div>
{% endblock %}