{% extends "admin_base.html" %}
{% set active = 'blocks' %}
{% block admin_content %}
<div class="page-head">
  <h1 class="page-title">首页布局</h1>
</div>
<p class="muted small" style="margin-bottom:16px">
  首页自上而下由区块组成，拖动左侧手柄调整顺序，保存后立即生效。
  「软件板块」设为半宽时，相邻两个半宽板块会在首页左右并排显示。
  若一个区块都没有，首页回退为默认布局（横幅 + 分类条 + 各分类板块）。
</p>

<div class="panel">
  <h2>新增区块</h2>
  <div class="block-type-grid">
    {% for key, label in block_types.items() %}
    <a class="block-type-card" href="/admin/blocks/add?type={{ key }}">
      <strong>{{ label }}</strong>
      <span class="muted small">
        {% if key == 'hero' %}主标题 + 搜索框（文字在站点设置中改）{% elif key == 'chips' %}分类 chips + 热门标签行{% elif key == 'category' %}某个分类的软件卡片，可选全宽/半宽{% elif key == 'vulns' %}最新漏洞通告列表{% elif key == 'announce' %}页面中部的醒目提示条{% elif key == 'links' %}一排内网快捷链接按钮{% else %}Markdown 图文内容块{% endif %}
      </span>
    </a>
    {% endfor %}
  </div>
</div>

<div class="panel">
  <h2>当前区块 <span class="muted small">（{{ rows | length }} 个，拖拽排序）</span></h2>
  {% if rows %}
  <ul class="block-list" id="block-list">
    {% for b in rows %}
    <li class="block-row {% if not b['visible'] %}block-off{% endif %}" draggable="true" data-id="{{ b['id'] }}">
      <span class="drag-handle" title="拖拽排序">
        <svg viewBox="0 0 24 24"><path d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
      </span>
      <span class="tag-pill">{{ block_types.get(b['block_type'], b['block_type']) }}</span>
      <span class="block-desc">
        {% if b['title'] %}<strong>{{ b['title'] }}</strong>{% endif %}
        {% if b['block_type'] == 'category' %}
        <span class="muted small">{{ cat_names.get(b['ref_id'], '⚠ 分类已删除或隐藏') }}</span>
        {% endif %}
      </span>
      <span class="muted small">{% if b['visible'] %}<span class="status-on">显示中</span>{% else %}<span class="status-off">已隐藏</span>{% endif %}</span>
      <span class="block-actions">
        <a class="btn btn-sm btn-ghost" href="/admin/blocks/{{ b['id'] }}/edit">编辑</a>
        <form class="inline" method="post" action="/admin/blocks/{{ b['id'] }}/toggle">
          <button class="btn btn-sm btn-ghost" type="submit">{% if b['visible'] %}隐藏{% else %}显示{% endif %}</button>
        </form>
        <form class="inline" method="post" action="/admin/blocks/{{ b['id'] }}/delete" onsubmit="return confirm('确定删除该区块？首页将不再显示它。')">
          <button class="btn btn-sm btn-danger" type="submit">删除</button>
        </form>
      </span>
    </li>
    {% endfor %}
  </ul>
  <p class="muted small" id="order-hint" style="margin-top:10px"></p>
  {% else %}
  <p class="muted">还没有配置区块，首页当前使用默认布局。从上方选择类型添加第一个区块。</p>
  {% endif %}
</div>

<script>
(function () {
  var list = document.getElementById("block-list");
  if (!list) return;
  var hint = document.getElementById("order-hint");
  var dragging = null;

  list.addEventListener("dragstart", function (e) {
    dragging = e.target.closest(".block-row");
    dragging.classList.add("dragging");
    e.dataTransfer.effectAllowed = "move";
  });
  list.addEventListener("dragend", function () {
    if (dragging) dragging.classList.remove("dragging");
    dragging = null;
    saveOrder();
  });
  list.addEventListener("dragover", function (e) {
    e.preventDefault();
    if (!dragging) return;
    var after = null;
    list.querySelectorAll(".block-row:not(.dragging)").forEach(function (row) {
      var rect = row.getBoundingClientRect();
      if (e.clientY < rect.top + rect.height / 2 && after === null) after = row;
    });
    if (after) list.insertBefore(dragging, after);
    else list.appendChild(dragging);
  });

  function saveOrder() {
    var ids = Array.from(list.querySelectorAll(".block-row")).map(function (r) {
      return r.getAttribute("data-id");
    }).join(",");
    hint.textContent = "保存顺序中…";
    fetch("/admin/blocks/order", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: "ids=" + encodeURIComponent(ids),
    }).then(function (r) {
      hint.textContent = r.ok ? "顺序已保存" : "保存失败，请刷新后重试";
      setTimeout(function () { hint.textContent = ""; }, 2000);
    }).catch(function () {
      hint.textContent = "保存失败，请刷新后重试";
    });
  }
})();
</script>
{% endblock %}