permissions-matrix.component.html

<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->
<lfx-card header="Permission Guide">
  <div class="space-y-4">
    <!-- Key Points -->
    <div class="bg-blue-50 border border-blue-200 rounded p-3">
      <p class="text-xs text-blue-800">
        <strong>Key:</strong> Project permissions apply to all resources. Committee permissions are limited to assigned committees and their associated meetings
        and/or mailing lists only.
      </p>
    </div>

    <!-- Compact Permission Matrix -->
    <div class="flex flex-col gap-3">
      @for (item of permissionMatrix; track item.scope + item.level) {
        <div class="border border-gray-200 rounded-lg p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" [class]="item.badge.bgColor + ' ' + item.badge.color">
              {{ item.scope }} {{ item.level }}
            </span>
          </div>
          <p class="text-xs text-gray-600 mb-2">{{ item.description }}</p>
          <ul class="text-xs text-gray-500 space-y-1">
            @for (capability of item.capabilities; track capability) {
              <li class="flex items-start">
                <i class="fa-light fa-check text-green-500 mr-1 mt-0.5" style="font-size: 10px"></i>
                {{ capability }}
              </li>
            }
          </ul>
        </div>
      }
    </div>
  </div>
</lfx-card>