{% extends "ewoooc_base.html" %}

{% block title %}PPT 線上預覽{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-ppt-preview.css') }}">
{% endblock %}

{% block ewooo_content %}
<div class="container-fluid mt-3">
  <section class="ppt-preview-hero">
    <div>
      <div class="ppt-preview-kicker"><i class="fas fa-file-powerpoint me-1"></i>PPT Online Preview</div>
      <h1 class="ppt-preview-title">{{ filename }}</h1>
      <p class="ppt-preview-subtitle">檔案大小 {{ file_size_kb }} KB · 修改時間 {{ file_mtime }} · 預覽以 PDF 快取呈現，原始 PPTX 仍可下載。</p>
    </div>
    <div class="ppt-preview-actions">
      <a class="btn btn-outline-secondary btn-sm" href="{{ back_url }}"><i class="fas fa-angle-left me-1"></i>回產線</a>
      <a class="btn btn-outline-primary btn-sm" href="{{ download_url }}"><i class="fas fa-download me-1"></i>下載 PPTX</a>
      {% if preview.ok %}
      <a class="btn btn-primary btn-sm" href="{{ pdf_url }}" target="_blank" rel="noopener"><i class="fas fa-up-right-from-square me-1"></i>開新視窗</a>
      {% endif %}
    </div>
  </section>

  {% if preview.ok %}
  <section class="ppt-preview-frame">
    <iframe src="{{ pdf_url }}" title="{{ filename }} 線上預覽"></iframe>
  </section>
  <p class="ppt-preview-note">
    <span class="status-good">預覽已產生</span>
    {% if preview.cache_hit %} · 使用既有快取{% else %} · 已建立新快取{% endif %}
    {% if preview.converter %} · {{ preview.converter }}{% endif %}
  </p>
  {% else %}
  <section class="ppt-preview-empty">
    <div class="ppt-preview-kicker"><i class="fas fa-triangle-exclamation me-1"></i>Preview unavailable</div>
    <h2>目前無法產生線上預覽</h2>
    <p>{{ preview.error or '轉檔流程沒有回傳可用 PDF。' }}</p>
    <div class="ppt-preview-diagnostics">
      <span>需要容器內可執行 LibreOffice / soffice</span>
      <span>部署後會用 PDF 快取避免每次重轉</span>
      <span>原始 PPTX 可先下載檢查</span>
    </div>
  </section>
  {% endif %}
</div>
{% endblock %}