{% extends "cms/base.html" %}
{% block title %}{{ page.title if page else '新建页面' }} - ARIFU CMS{% endblock %}
{% set active='pages' %}
{% block content %}
<div class="card">
  <h2>{{ '✏ 编辑页面' if page else '➕ 新建页面' }}</h2>
  <form method="POST" style="max-width:680px;">
    <div class="form-group">
      <label>页面标题 *</label>
      <input type="text" name="title" class="form-control" value="{{ page.title if page else '' }}" placeholder="例如：产品中心" required>
    </div>
    <div class="form-group">
      <label>Slug（URL路径）*</label>
      <input type="text" name="slug" class="form-control" value="{{ page.slug if page else '' }}" placeholder="products / about / contact" {{ 'readonly' if page else '' }} required>
      <div class="form-hint">例如 products → 访问 /products/，留空自动从标题生成</div>
    </div>
    <div class="form-group">
      <label>副标题</label>
      <input type="text" name="subtitle" class="form-control" value="{{ page.subtitle if page else '' }}" placeholder="简短描述">
    </div>
    <div class="form-group">
      <label>Meta 描述（SEO）</label>
      <textarea name="meta_desc" class="form-control" rows="2" placeholder="搜索引擎显示的描述，120字以内">{{ page.meta_desc if page else '' }}</textarea>
    </div>
    <div class="form-group">
      <label>页面模板</label>
      <select name="template" class="form-control">
        {% set t = page.template if page else 'default' %}
        <option value="default"   {{ 'selected' if t=='default'   else '' }}>📄 默认（通用）</option>
        <option value="home"      {{ 'selected' if t=='home'      else '' }}>🏠 首页</option>
        <option value="product"   {{ 'selected' if t=='product'   else '' }}>📦 产品详情</option>
        <option value="solution"  {{ 'selected' if t=='solution'  else '' }}>💧 解决方案</option>
        <option value="case"      {{ 'selected' if t=='case'      else '' }}>🏭 案例详情</option>
        <option value="contact"   {{ 'selected' if t=='contact'   else '' }}>📞 联系</option>
      </select>
    </div>
    {% if page %}
    <div class="form-group">
      <label>发布状态</label>
      <select name="status" class="form-control">
        <option value="draft"    {{ 'selected' if page.status=='draft'    else '' }}>📝 草稿（仅登录可见）</option>
        <option value="published"{{ 'selected' if page.status=='published' else '' }}>✅ 已发布（对外可见）</option>
      </select>
    </div>
    {% endif %}
    <div class="btn-group">
      <button type="submit" class="btn btn-primary">💾 保存</button>
      {% if page %}
      <a href="/admin/builder/{{ page.id }}/" class="btn btn-green">🧱 可视化构建</a>
      <a href="/admin/preview/{{ page.id }}/" target="_blank" class="btn btn-gray">👁 预览</a>
      {% endif %}
      <a href="/admin/pages/" class="btn btn-gray">← 返回列表</a>
    </div>
  </form>
</div>

{% if page and blocks %}
<div class="card">
  <h2>🧱 内容区块 <span class="badge">{{ blocks|length }}</span></h2>
  <p style="color:var(--muted);font-size:13px;margin-bottom:12px;">使用「<strong>可视化构建器</strong>」拖拽排版更方便。</p>
  <div class="btn-group">
    <a href="/admin/builder/{{ page.id }}/" class="btn btn-green">🧱 打开构建器</a>
  </div>
  <div style="margin-top:16px;">
  {% for b in blocks %}
    <div class="block-card">
      <div class="handle">⋮⋮</div>
      <span class="block-type">{{ b.type }}</span>
      <div class="block-preview">{{ b.content[:80] if b.content else '(空)' }}</div>
    </div>
  {% endfor %}
  </div>
</div>
{% endif %}
{% endblock %}