{% extends "base.html" %}
{% from "_pagination.html" import render_pagination %}

{% set active_page = "history" %}
{% block title %}预测历史 | 供水管道健康评估系统{% endblock %}

{% block content %}
<div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
  <div>
    <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">预测历史</h1>
    <p class="mt-2 text-sm text-textSub">查看已上传文件和对应预测报告。</p>
  </div>
  <a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary">
    <span class="material-symbols-outlined text-lg">upload_file</span>
    新建分析
  </a>
</div>

<section class="flex h-[900px] min-w-0 flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
  <div class="border-b border-line px-5 py-4">
    <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
      <h2 class="text-lg font-extrabold">上传记录</h2>
      {% if pagination.total %}
      <span class="text-sm text-textSub">共 {{ pagination.total }} 条</span>
      {% endif %}
    </div>
  </div>
  <div class="min-h-0 min-w-0 flex-1 divide-y divide-line overflow-y-auto">
    {% for record in records %}
    <div class="grid min-h-[76px] min-w-0 gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
      <div class="min-w-0 overflow-hidden">
        <div class="truncate text-sm font-bold">{{ record.original_filename }}</div>
        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-textSub">
          <span>{{ record.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
          <span class="hidden sm:inline">·</span>
          <span>记录 #{{ record.id }}</span>
        </div>
      </div>
      <div class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-2 md:flex md:w-auto md:flex-nowrap">
        <a class="ui-btn ui-btn-compact ui-btn-secondary w-full px-3 md:w-auto" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">
          <span class="material-symbols-outlined text-lg">description</span>
          原始文件
        </a>
        <a class="ui-btn ui-btn-compact ui-btn-primary w-full px-3 md:w-auto" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">
          <span class="material-symbols-outlined text-lg">download</span>
          预测结果
        </a>
      </div>
    </div>
    {% else %}
    <div class="flex h-full min-h-[520px] flex-col items-center justify-center p-10 text-center">
      <span class="material-symbols-outlined text-5xl text-primary">history</span>
      <h2 class="mt-4 text-xl font-extrabold">还没有历史记录</h2>
      <p class="mt-2 text-sm text-textSub">上传数据并完成预测后，记录会显示在这里。</p>
    </div>
    {% endfor %}
  </div>
  {{ render_pagination(pagination, 'main.history_page') }}
</section>
{% endblock %}