{% extends "base.html" %}
{% block title %}— {{ filename }}{% endblock %}
{% block content %}

{# ── breadcrumb ── #}
<div class="mb-6">
  <div class="flex items-center gap-2 text-sm text-slate-500 mb-2">
    <a href="/results" class="hover:underline">Results</a>
    <span>›</span>
    <a href="/results/{{ experiment }}" class="font-mono hover:underline">{{ experiment }}</a>
    <span>›</span>
    <a href="/results/{{ experiment }}/{{ run_id }}" class="font-mono hover:underline">{{ run_id }}</a>
    <span>›</span>
    <span class="font-mono text-slate-700">{{ filename }}</span>
  </div>

  <div class="flex flex-wrap items-center gap-3">
    <h1 class="text-2xl font-bold text-slate-900 font-mono">{{ filename }}</h1>
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-600">
      {{ preview_type | upper }}
    </span>
    <span class="text-sm text-slate-400 ml-auto">
      {% if file_size %}{{ (file_size / 1024) | round(1) }} KB{% endif %}
    </span>
  </div>
  <p class="mt-1 text-xs text-slate-400 font-mono truncate">{{ path }}</p>
</div>

{# ── download button ── #}
<div class="mb-6">
  <a href="{{ download_url }}"
     class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 4v11" />
    </svg>
    Download {{ filename }}
  </a>
</div>

{# ── CSV preview ── #}
{% if preview_type == 'csv' %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm">
  <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-slate-900">Preview</h2>
    {% if truncated %}
    <span class="text-xs text-amber-600 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded">
      Showing first {{ csv_rows | length }} rows
    </span>
    {% else %}
    <span class="text-xs text-slate-400">{{ csv_rows | length }} rows</span>
    {% endif %}
  </div>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-slate-100 text-sm">
      {% if csv_headers %}
      <thead class="bg-slate-50">
        <tr>
          {% for col in csv_headers %}
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider whitespace-nowrap">
            {{ col }}
          </th>
          {% endfor %}
        </tr>
      </thead>
      {% endif %}
      <tbody class="divide-y divide-slate-100">
        {% for row in csv_rows %}
        <tr class="hover:bg-slate-50">
          {% for cell in row %}
          <td class="px-4 py-2 text-xs font-mono text-slate-700 whitespace-nowrap">{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
        {% if not csv_rows %}
        <tr>
          <td class="px-4 py-4 text-sm text-slate-400 text-center">No data rows found.</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  {% if truncated %}
  <div class="px-6 py-3 border-t border-slate-100 text-xs text-slate-400">
    File contains more rows — download to view complete data.
  </div>
  {% endif %}
</div>

{# ── text preview ── #}
{% elif preview_type == 'text' %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm">
  <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-slate-900">Preview</h2>
    {% if truncated %}
    <span class="text-xs text-amber-600 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded">
      Showing first 50 lines
    </span>
    {% endif %}
  </div>
  <div class="px-6 py-4">
    <pre class="text-xs font-mono text-slate-700 overflow-auto max-h-[65vh] whitespace-pre-wrap leading-relaxed">{{ text_content }}</pre>
  </div>
  {% if truncated %}
  <div class="px-6 py-3 border-t border-slate-100 text-xs text-slate-400">
    File contains more lines — download to view complete content.
  </div>
  {% endif %}
</div>

{# ── error ── #}
{% elif preview_type == 'error' %}
<div class="bg-white rounded-lg border border-red-200 shadow-sm px-6 py-8 text-center">
  <p class="text-sm text-red-600 font-medium">Could not read file</p>
  {% if preview_error %}
  <p class="text-xs text-slate-400 mt-1 font-mono">{{ preview_error }}</p>
  {% endif %}
</div>

{# ── no preview ── #}
{% else %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-12 text-center">
  <p class="text-sm text-slate-500">No preview available for this file type.</p>
  <p class="text-xs text-slate-400 mt-1">Use the download button above to open the file.</p>
</div>
{% endif %}

{% endblock %}