<div class="role-dialog">
  <!-- 对话框标题 -->
  <div class="dialog-header">
    <h2 class="dialog-title">{{ isEditMode ? '编辑角色' : '添加新角色' }}</h2>
    <button mat-icon-button class="close-btn" (click)="onCancel()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>

  <!-- 表单内容 -->
  <div class="dialog-content">
    <form class="role-form">
      <!-- 角色基本信息 -->
      <div class="form-section">
        <h3 class="section-title">基本信息</h3>
        
        <!-- 角色名称 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>角色名称 *</mat-label>
            <input matInput type="text" [(ngModel)]="role.name" name="name"
                   placeholder="请输入角色名称" [disabled]="role.name === '超级管理员'">
            <mat-icon matSuffix>supervised_user_circle</mat-icon>
            <mat-hint *ngIf="role.name === '超级管理员'">超级管理员角色名称不可修改</mat-hint>
          </mat-form-field>
        </div>

        <!-- 角色描述 -->
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>角色描述 *</mat-label>
            <textarea matInput [(ngModel)]="role.description" name="description"
                      placeholder="请输入角色描述" rows="3"></textarea>
            <mat-icon matSuffix>description</mat-icon>
          </mat-form-field>
        </div>

        <!-- 用户数量显示 -->
        <div class="form-group" *ngIf="isEditMode">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>关联用户数</mat-label>
            <input matInput type="text" value="{{ role.usersCount }}" disabled>
            <mat-icon matSuffix>people</mat-icon>
            <mat-hint>当前有 {{ role.usersCount }} 个用户分配了此角色</mat-hint>
          </mat-form-field>
        </div>
      </div>

      <!-- 权限设置 -->
      <div class="form-section">
        <div class="section-header">
          <h3 class="section-title">权限设置</h3>
          <div class="permission-summary" [class.warning]="selectedPermissionsCount === 0">
            已选择 {{ selectedPermissionsCount }}/{{ totalPermissionsCount }} 项权限
          </div>
        </div>

        <!-- 权限组列表 -->
        <div class="permission-groups">
          <!-- 超级管理员特殊提示 -->
          <div class="permission-tip" *ngIf="role.name === '超级管理员'">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFAA00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            超级管理员角色默认拥有所有权限，无需手动选择
          </div>

          <!-- 权限组 -->
          <div *ngIf="role.name !== '超级管理员'" class="permission-group">
            <div *ngFor="let group of permissionGroups" class="permission-group-item">
              <!-- 权限组头部 -->
              <div class="group-header">
                <mat-checkbox
                  [checked]="isPermissionGroupSelected(group)"
                  [indeterminate]="isPermissionGroupIndeterminate(group)"
                  (change)="togglePermissionGroup(group)"
                  class="group-checkbox">
                  <span class="group-name">{{ group.name }}</span>
                  <span class="group-count">({{ group.permissions.length }})</span>
                </mat-checkbox>
              </div>
              
              <!-- 权限列表 -->
              <div class="permissions-list">
                <div *ngFor="let permission of group.permissions" class="permission-item">
                  <mat-checkbox
                    [checked]="isPermissionSelected(permission.key)"
                    (change)="togglePermission(permission.key)"
                    class="permission-checkbox">
                    <div class="permission-info">
                      <div class="permission-name">{{ permission.name }}</div>
                      <div class="permission-description">{{ permission.description }}</div>
                    </div>
                  </mat-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <!-- 操作按钮 -->
  <div class="dialog-footer">
    <button mat-button class="cancel-btn" (click)="onCancel()">
      取消
    </button>
    <button mat-raised-button color="primary" class="save-btn" 
            (click)="onSave()">
      {{ isEditMode ? '保存修改' : '创建角色' }}
    </button>
  </div>
</div>