{% extends "base.html" %}
{% import "macros.html" as m %}
{% block title %}用户权限 - Amrita Dashboard{% endblock %}
{% block topbar_title %}用户权限详情{% endblock %}
{% block content %}

<!-- Member Info -->
<div class="glass-card p-4 mb-5">
  <div class="flex flex-wrap items-center gap-3">
    <span class="text-sm text-gray-500 dark:text-gray-400">用户ID:</span>
    <span class="text-base font-mono font-semibold text-gray-800 dark:text-gray-200">{{ user_id }}</span>
    {% if user_data.permission_groups %}
    <span class="text-xs text-gray-400 dark:text-gray-500">|</span>
    <span class="text-xs text-gray-500 dark:text-gray-400">所属权限组:</span>
    {% for group in user_data.permission_groups %}
    <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light border border-primary/20">{{ group }}</span>
    {% endfor %}
    {% endif %}
  </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="PermEditor.save()"
            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>
  PermEditor.init({
    containerId: "perm-table",
    tagsContainerId: "perm-tags",
    dataStr: `{{ user_data.permissions }}`,
    saveUrl: "/api/users/permissions/user/{{ user_id }}",
  });
</script>
{% endblock %}