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

{% block extra_css %}
{{ pygments_css }}
.highlight { border-radius: 6px; }
.highlight pre { margin: 0; padding: 12px; overflow-x: auto; font-size: 12px; line-height: 1.6; }
.file-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.file-meta .label { color: var(--muted); }
.truncation-warning {
  background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 12px; color: #92400e;
}
.binary-notice {
  background: var(--primary-light); border-radius: 6px;
  padding: 24px; text-align: center; color: var(--muted); font-size: 14px;
}
{% endblock %}

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

<h1 class="text-mono" style="font-size: 18px;">{{ path }}</h1>

<div class="card mt-1">
  <div class="file-meta">
    <span><span class="label">Language:</span> {{ fc.language }}</span>
    <span><span class="label">Size:</span> {{ fc.original_size | filesize }}</span>
  </div>

  {% if fc.is_image %}
  <div style="padding: 12px;">
    <img src="/experiments/{{ exp_id }}/raw/{{ path }}" alt="{{ path }}" style="max-width: 100%; height: auto; display: block;">
  </div>
  {% elif fc.is_binary %}
  <div class="binary-notice">
    Binary file ({{ fc.original_size | filesize }}) — cannot be displayed.
  </div>
  {% else %}
    {% if fc.truncated %}
    <div class="truncation-warning">
      File truncated — showing first 100 KB of {{ fc.original_size | filesize }}.
    </div>
    {% endif %}
    {{ fc.highlighted_html | safe }}
  {% endif %}
</div>
{% endblock %}