{% extends "base.html" %}
{% import "macros.html" as m %}
{% block title %}创建权限组 - Amrita Dashboard{% endblock %}
{% block topbar_title %}创建权限组{% endblock %}
{% block content %}

<!-- Group Name + Preset -->
<div class="glass-card p-4 mb-5">
  <div class="flex flex-wrap items-end gap-4">
    <div class="flex-1 min-w-[200px]">
      <label for="group_name" class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">权限组名称</label>
      <input type="text" id="group_name" required
        class="w-full px-3 py-2 rounded-lg text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
        placeholder="请输入权限组名称">
    </div>
    <div class="flex-1 min-w-[200px]">
      <label for="preset-select" class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">
        <i class="fas fa-magic mr-1 text-blue-500"></i>权限预设（可选）
      </label>
      <select id="preset-select"
        class="w-full px-3 py-2 rounded-lg text-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
        <option value="">-- 手动配置 --</option>
        <option value="admin">管理员 (admin.* command.* chat.*)</option>
        <option value="moderator">版主 (chat.* command.ban)</option>
        <option value="user">普通用户 (chat.send)</option>
        <option value="blacklist">黑名单 (全部禁止)</option>
      </select>
    </div>
  </div>
</div>

<!-- Two-column layout -->
<div class="flex flex-col lg:flex-row gap-5">
  <!-- Left: Tag panel -->
  <div class="lg:w-64 flex-shrink-0">
    <div class="glass-card p-4 sticky top-[76px]">
      <h4 class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-3">
        <i class="fas fa-tags mr-1.5 text-primary"></i>快速权限
      </h4>
      <div id="perm-tags" class="flex flex-wrap gap-2"></div>
      <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
        <button onclick="PermEditor.showAddDialog()"
          class="w-full px-3 py-2 rounded-lg text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
          <i class="fas fa-plus mr-1"></i> 手动添加
        </button>
      </div>
    </div>
  </div>

  <!-- Right: Editor -->
  <div class="flex-1 min-w-0">
    <div class="glass-card">
      <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
          <i class="fas fa-list-check mr-1.5 text-primary"></i>权限条目
        </h3>
        <div class="flex gap-2">
          <button onclick="doCreate()"
            class="px-4 py-1.5 rounded-lg text-xs font-medium bg-primary text-white hover:bg-primary-hover transition-colors">
            <i class="fas fa-save mr-1"></i>创建权限组
          </button>
          <a href="/users/permissions"
            class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-gray-500 text-white hover:bg-gray-600 transition-colors">
            <i class="fas fa-arrow-left mr-1"></i>返回
          </a>
        </div>
      </div>
      <div id="perm-table" class="p-4 min-h-[200px]"></div>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
  // Presets
  var PRESETS = {
    admin:     { "admin.*":"true", "command.*":"true", "chat.*":"true" },
    moderator: { "chat.*":"true", "command.ban":"true" },
    user:      { "chat.send":"true", "chat.*":"false" },
    blacklist: { "chat.*":"false", "command.*":"false" },
  };

  var presetData = "";
  PermEditor.init({
    containerId: "perm-table",
    tagsContainerId: "perm-tags",
    dataStr: presetData,
    saveUrl: "",
    onSaved: function () { window.location.href = "/users/permissions"; },
  });

  // Override save for create (needs group_name)
  function doCreate() {
    var name = document.getElementById("group_name").value.trim();
    if (!name) { Swal.fire("error", "请输入权限组名称", "error"); return; }
    PermEditor._saveUrl = "/api/users/permissions/perm_group/" + encodeURIComponent(name);
    PermEditor.save();
  }

  document.getElementById("preset-select").addEventListener("change", function () {
    var p = this.value;
    if (!p) return;
    var entries = PRESETS[p] || {};
    var lines = [];
    Object.keys(entries).forEach(function (k) { lines.push(k + " " + entries[k]); });
    PermEditor.init({
      containerId: "perm-table",
      tagsContainerId: "perm-tags",
      dataStr: lines.join("\n"),
      saveUrl: "",
      onSaved: function () { window.location.href = "/users/permissions"; },
    });
  });
</script>
{% endblock %}