{% extends "admin_base.html" %}
{% set active = 'blocks' %}
{% set btype = item['block_type'] %}
{% block admin_content %}
<h1 class="page-title">{% if item.get('id') %}编辑区块{% else %}新增区块{% endif %}：{{ block_types[btype] }}</h1>
{% if error %}<div class="alert alert-error">{{ error }}</div>{% endif %}
<form class="form" method="post" action="{% if item.get('id') %}/admin/blocks/{{ item['id'] }}/edit{% else %}/admin/blocks/add{% endif %}">
  <input type="hidden" name="block_type" value="{{ btype }}">
  <div class="panel">
    <label>区块标题（可选）
      <input type="text" name="title" value="{{ item.get('title', '') }}" maxlength="64"
             placeholder="{% if btype == 'category' %}留空则用分类名{% elif btype == 'vulns' %}留空则显示“漏洞补丁专区”{% elif btype == 'links' %}留空则不显示标题{% else %}留空则不显示标题{% endif %}">
    </label>

    {% if btype == 'category' %}
    <div class="form-row">
      <label>展示分类 <em>*</em>
        <select name="ref_id">
          {% for c in cats %}
          <option value="{{ c['id'] }}" {% if item.get('ref_id') == c['id'] %}selected{% endif %}>{{ c['name'] }}</option>
          {% endfor %}
        </select>
      </label>
      <label>板块宽度
        <select name="width">
          <option value="full" {% if cfg.get('width') != 'half' %}selected{% endif %}>全宽（独占一行）</option>
          <option value="half" {% if cfg.get('width') == 'half' %}selected{% endif %}>半宽（相邻两个半宽左右并排）</option>
        </select>
      </label>
    </div>
    <label class="form-narrow">最多显示数量
      <input type="number" name="max" value="{{ cfg.get('max', 0) }}" min="0" max="100">
    </label>
    <p class="muted small hint">0 表示显示该分类全部软件；设置数量后板块右上角出现“更多”链接。</p>
    {% if not cats %}<p class="alert alert-error">还没有可用分类，请先到「板块管理」创建。</p>{% endif %}

    {% elif btype == 'vulns' %}
    <label class="form-narrow">最多显示条数
      <input type="number" name="max" value="{{ cfg.get('max', 6) }}" min="1" max="24">
    </label>
    <p class="muted small hint">按发布时间倒序取最新通告，板块右上角带“更多”链接到漏洞管理页。</p>

    {% elif btype == 'announce' %}
    <label>公告内容 <em>*</em>
      <input type="text" name="text" value="{{ cfg.get('text', '') }}" maxlength="200" placeholder="例如：本周五 18:00-20:00 停机维护，请提前下载所需软件">
    </label>
    <label class="form-narrow">样式
      <select name="level">
        <option value="info" {% if cfg.get('level') != 'warn' %}selected{% endif %}>普通（蓝）</option>
        <option value="warn" {% if cfg.get('level') == 'warn' %}selected{% endif %}>警示（黄）</option>
      </select>
    </label>

    {% elif btype == 'links' %}
    <label style="margin-bottom:8px">链接清单 <em>*</em></label>
    <div id="link-rows">
      {% set links = cfg.get('links') or [{'name': '', 'url': ''}] %}
      {% for l in links %}
      <div class="file-new-row link-row">
        <input type="text" name="link_names" value="{{ l['name'] }}" placeholder="名称，如：OA 办公系统" maxlength="32">
        <input type="text" name="link_urls" value="{{ l['url'] }}" placeholder="地址，如：http://192.168.1.10/oa" maxlength="300">
        <button class="btn btn-sm btn-ghost row-del" type="button">删除</button>
      </div>
      {% endfor %}
    </div>
    <button class="btn btn-ghost btn-sm" id="add-link-row" type="button">+ 添加链接</button>

    {% elif btype == 'html' %}
    <label>内容（支持 Markdown）<em>*</em>
      <textarea name="content" rows="10" placeholder="支持 Markdown 语法：**加粗**、列表、表格、链接等">{{ cfg.get('content', '') }}</textarea>
    </label>

    {% elif btype == 'hero' %}
    <p class="muted small hint">横幅区块显示站点设置中的主标题、副标题与搜索框，无需其他配置。</p>
    {% elif btype == 'chips' %}
    <p class="muted small hint">分类与标签条区块显示分类 chips 与热门标签行，无需其他配置。</p>
    {% endif %}
  </div>
  <div class="form-actions">
    <a class="btn btn-ghost" href="/admin/blocks">取消</a>
    <button class="btn btn-primary" type="submit">{% if item.get('id') %}保存修改{% else %}添加区块{% endif %}</button>
  </div>
</form>

{% if btype == 'links' %}
<script>
(function () {
  var wrap = document.getElementById("link-rows");
  var addBtn = document.getElementById("add-link-row");
  function bind(row) {
    row.querySelector(".row-del").addEventListener("click", function () {
      if (wrap.querySelectorAll(".link-row").length === 1) {
        row.querySelectorAll("input").forEach(function (i) { i.value = ""; });
        return;
      }
      row.remove();
    });
  }
  wrap.querySelectorAll(".link-row").forEach(bind);
  addBtn.addEventListener("click", function () {
    var row = wrap.querySelector(".link-row").cloneNode(true);
    row.querySelectorAll("input").forEach(function (i) { i.value = ""; });
    wrap.appendChild(row);
    bind(row);
    row.querySelector("input").focus();
  });
})();
</script>
{% endif %}
{% endblock %}