{% extends "cms/materialpro/base.html" %}
{% block content %}
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i data-feather="settings" class="feather-sm"></i> {{ '编辑页面' if page else '新建页面' }}</h5>
        </div>
        <div class="card-body">
          {% if error %}
          <div class="alert alert-danger">{{ error }}</div>
          {% endif %}
          <form method="POST">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label fw-semibold">页面标题 <span class="text-danger">*</span></label>
                <input type="text" name="title" class="form-control" value="{{ page.title or '' }}" required placeholder="例如：ARF-H 纳米气泡发生器">
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">URL别名</label>
                <input type="text" name="slug" class="form-control" value="{{ page.slug or '' }}" placeholder="留空自动生成">
                <div class="form-text">访问路径：/{{ page.slug or 'slug' }}/</div>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">页面类型</label>
                <select name="page_type" class="form-select">
                  <option value="page" {{ 'selected' if page.page_type=='page' or not page else '' }}>普通页面</option>
                  <option value="product" {{ 'selected' if page.page_type=='product' else '' }}>产品详情</option>
                  <option value="case" {{ 'selected' if page.page_type=='case' else '' }}>案例详情</option>
                  <option value="solution" {{ 'selected' if page.page_type=='solution' else '' }}>解决方案</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">上级页面（层次）</label>
                <select name="parent_id" class="form-select">
                  <option value="0">— 顶级（根页面）—</option>
                  {% for p in nav_items %}
                  <option value="{{ p.id }}" {{ 'selected' if page and page.parent_id==p.id else '' }}>
                    {{ p.title }}
                  </option>
                  {% endfor %}
                </select>
                <div class="form-text">选择上级决定页面的目录层级</div>
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">状态</label>
                <select name="status" class="form-select">
                  <option value="draft" {{ 'selected' if not page or page.status=='draft' else '' }}>草稿</option>
                  <option value="published" {{ 'selected' if page and page.status=='published' else '' }}>已发布</option>
                </select>
              </div>
              <div class="col-md-8">
                <label class="form-label fw-semibold">导航标签</label>
                <input type="text" name="nav_label" class="form-control" value="{{ page.nav_label or '' }}" placeholder="留空使用页面标题">
                <div class="form-text">显示在导航菜单中的名称</div>
              </div>
            </div>

            <hr class="my-4">
            <h6 class="fw-bold text-muted mb-3">SEO 搜索引擎优化</h6>
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label fw-semibold">SEO 标题</label>
                <input type="text" name="seo_title" class="form-control" value="{{ page.seo_title or '' }}" placeholder="留空则使用页面标题">
                <div class="form-text">建议 60 字符以内</div>
              </div>
              <div class="col-12">
                <label class="form-label fw-semibold">SEO 描述</label>
                <textarea name="seo_desc" class="form-control" rows="3" placeholder="搜索引擎结果中显示的描述，建议 160 字符以内">{{ page.seo_desc or '' }}</textarea>
              </div>
            </div>

            <hr class="my-4">
            <div class="d-flex justify-content-between">
              <a href="/admin/mp/mp-pages/" class="btn btn-outline-secondary">取消</a>
              <div class="d-flex gap-2">
                {% if page %}
                <a href="/admin/mp/mp-builder/{{ page.id }}/" class="btn btn-primary">
                  <i data-feather="layout" class="feather-sm"></i> 打开编辑器
                </a>
                {% endif %}
                <button type="submit" class="btn btn-success">
                  <i data-feather="save" class="feather-sm"></i> 保存页面
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}