{% extends "base.html" %}

{% set active_page = "reference" %}
{% 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.reference_pdf') }}" target="_blank" rel="noopener" class="ui-btn ui-btn-primary w-full sm:w-fit">
    <span class="material-symbols-outlined text-lg">open_in_new</span>
    新窗口查看
  </a>
</div>

<section class="overflow-hidden rounded-lg border border-line bg-white shadow-panel">
  <div class="flex flex-col gap-2 border-b border-line px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex items-center gap-2 text-sm font-bold">
      <span class="material-symbols-outlined text-primary">picture_as_pdf</span>
      文档预览
    </div>
    <span class="text-xs text-textSub">浏览器不支持内嵌时可使用右上角按钮</span>
  </div>
  <div class="h-[65svh] min-h-[400px] bg-slate-100 sm:h-[calc(100vh-230px)] sm:min-h-[560px]">
    <object data="{{ url_for('main.reference_pdf') }}#toolbar=1&navpanes=0" type="application/pdf" class="h-full w-full">
      <div class="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
        <span class="material-symbols-outlined text-5xl text-primary">picture_as_pdf</span>
        <p class="text-sm text-textSub">当前浏览器无法内嵌显示参考文档。</p>
        <a href="{{ url_for('main.reference_pdf') }}" target="_blank" rel="noopener" class="font-semibold text-primary">打开参考文档</a>
      </div>
    </object>
  </div>
</section>
{% endblock %}