{% extends "admin_base.html" %}
{% set active = 'articles' if not submitter_mode else 'submit_art' %}
{% block admin_content %}
<h1 class="page-title">{{ page_title }}</h1>
{% if error %}<div class="alert alert-error">{{ error }}</div>{% endif %}

<form class="form" method="post" action="{{ form_action }}" id="article-form">
  <input type="hidden" name="content_type" id="content_type"
         value="{{ item.get('content_type', 'md') if item else 'md' }}">
  <input type="hidden" name="app_file_url" id="app_file_url"
         value="{{ item.get('app_file_url', '') if item else '' }}">
  {% set parts_json = parts | tojson if parts else '[]' %}
  {% set atts_json = attachments | tojson if attachments else '[]' %}
  <script type="application/json" id="initial-parts">{{ parts_json | safe }}</script>
  <script type="application/json" id="initial-attachments">{{ atts_json | safe }}</script>
  <div class="panel">
    <label>标题 <em>*</em>
      <input type="text" name="title" id="art-title" value="{{ item.get('title', '') if item else '' }}" maxlength="200" required>
    </label>
    <label>摘要（列表卡片展示，建议 50 字以内）
      <textarea name="summary" rows="2" maxlength="500">{{ item.get('summary', '') if item else '' }}</textarea>
    </label>
    <label>封面图（建议 16:9，不上传则显示默认图标）
      <div class="cover-row">
        <input type="text" name="cover_url" id="cover_url" class="cover-input"
               value="{{ item.get('cover_url', '') if item else '' }}" placeholder="可粘贴图片链接，或点右侧按钮上传">
        <button class="btn btn-ghost btn-sm md-upload-btn" type="button"
                data-target="cover_url" data-kind="image">上传封面</button>
        <div class="cover-preview">
          {% if item and item.get('cover_url') %}<img src="{{ item['cover_url'] }}" alt="">{% endif %}
        </div>
      </div>
    </label>

    <div class="doc-import-box panel-inner">
      <div class="doc-import-head">
        <strong>导入 HTML / MHTML 文档</strong>
        <span class="muted small">浏览器「另存为网页」生成的 .html/.mhtml 可直接导入；图片自动转存本站</span>
      </div>
      <div class="doc-import-row">
        <label class="radio-pill"><input type="radio" name="import_mode" value="doc" checked>
          文档模式（解析文字和图片，清除脚本）</label>
        <label class="radio-pill"><input type="radio" name="import_mode" value="app">
          网页应用模式（原样沙箱运行，可下载离线文件）</label>
      </div>
      <div class="doc-import-row">
        <input type="file" id="doc-import-file" accept=".html,.htm,.mhtml,.mht" multiple>
        <button class="btn btn-primary btn-sm" type="button" id="doc-import-btn">开始导入</button>
        <span id="doc-import-status" class="muted small"></span>
        <span class="muted small">提示：文档模式选多个文件会自动建立「合集」，每个文档成为可点击的子篇章</span>
      </div>
      <div class="doc-app-panel" id="app-panel" hidden>
        <div class="app-toolbar">
          <strong>已导入网页应用：</strong>
          <a class="btn btn-ghost btn-sm" id="app-open" href="#" target="_blank" rel="noopener">新窗口测试</a>
          <button class="btn btn-ghost btn-sm" type="button" id="app-clear">改回普通文章</button>
        </div>
        <iframe class="app-frame app-frame-admin" id="app-preview" title="应用预览"></iframe>
      </div>
      <div class="doc-html-panel" id="html-panel" hidden>
        <span class="badge badge-info">HTML 文档模式</span>
        <span class="muted small">正文为导入的 HTML 片段（脚本已清除），可在下方直接编辑源码；点
          <button type="button" class="btn-link" id="html-clear">改回普通 Markdown 文章</button>
          将按纯文本处理。</span>
      </div>
      <div class="doc-collection-panel" id="collection-panel" hidden>
        <span class="badge badge-info">合集模式</span>
        <span class="muted small">下方每个子篇章都会显示在文章里，文章顶部自动生成目录（点击跳转）。可编辑标题、增删或排序。</span>
      </div>
    </div>

    <div id="parts-editor" hidden>
      <div class="panel-head-row">
        <strong>合集子篇章</strong>
        <button type="button" class="btn btn-ghost btn-sm" id="part-add">+ 新增子篇章</button>
      </div>
      <div id="parts-list"></div>
    </div>

    <label id="content-label"><span id="content-label-text">正文（Markdown）</span>
      <div class="md-toolbar">
        <button type="button" class="btn btn-sm btn-ghost md-upload-btn" data-kind="image">📷 插入图片</button>
        <button type="button" class="btn btn-sm btn-ghost md-upload-btn" data-kind="video">🎬 插入视频</button>
        <span class="muted small md-tip">可直接 Ctrl+V 粘贴截图，或把图片/视频拖入编辑框。从 Typora 复制时请确认图片链接已是站内地址（/media/…），本地路径（typora-user-images/…）的图片别人看不到；提交时会自动检查</span>
      </div>
      <textarea name="content" id="art-content" class="md-editor" rows="20" placeholder="支持 Markdown：## 标题、**加粗**、- 列表、`代码块`；图片 ![]()，视频点上方按钮自动插入播放器">{{ item.get('content', '') if item else '' }}</textarea>
    </label>

    <div class="panel-inner" id="attachments-editor">
      <div class="panel-head-row">
        <strong>附件与链接（可选）</strong>
        <span class="muted small">读者可在文章底部下载附件或打开链接</span>
      </div>
      <div class="att-toolbar">
        <input type="file" id="att-file-input" multiple hidden>
        <button type="button" class="btn btn-ghost btn-sm" id="att-upload">+ 上传附件文件</button>
        <button type="button" class="btn btn-ghost btn-sm" id="att-add-link">+ 添加网页链接</button>
      </div>
      <div id="att-list"></div>
    </div>

    {% if not submitter_mode and item and item.get('id') %}
    <label class="checkbox"><input type="checkbox" name="status" value="1" {% if item.get('status') == 1 %}checked{% endif %}> 发布（取消勾选则下架，前台不可见）</label>
    {% endif %}
    {% if submitter_mode %}
    <div class="alert">提交后需管理员审核通过才会在前台展示。{% if item and item.get('review_note') and item.get('status') == 0 %}<br><span class="review-note">上次驳回原因：{{ item['review_note'] }}</span>{% endif %}</div>
    {% endif %}
  </div>
  <div class="form-actions">
    <a class="btn btn-ghost" href="{{ cancel_url }}">取消</a>
    <button class="btn btn-primary" type="submit">{% if item and item.get('id') %}保存修改{% else %}{% if submitter_mode %}提交审核{% else %}立即发布{% endif %}{% endif %}</button>
  </div>
</form>
{% endblock %}