committee-view.component.html

<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

<div class="container mx-auto py-6 px-8">
  <!-- Loading State -->
  @if (loading()) {
    <div class="flex justify-center items-center min-h-96">
      <div class="text-center">
        <i class="fa-light fa-spinner-third fa-spin text-3xl text-blue-600 mb-4"></i>
        <p class="text-gray-600">Loading committee details...</p>
      </div>
    </div>
  }

  <!-- Error State -->
  @if (error()) {
    <div class="flex justify-center items-center min-h-96">
      <div class="text-center">
        <i class="fa-light fa-exclamation-triangle text-3xl text-red-500 mb-4"></i>
        <h2 class="text-xl font-semibold text-gray-900 mb-2">Committee Not Found</h2>
        <p class="text-gray-600 mb-4">The committee you're looking for doesn't exist or has been removed.</p>
        <lfx-button label="Back to Committees" styleClass="p-button-outlined" (onClick)="goBack()"> </lfx-button>
      </div>
    </div>
  }

  <!-- Committee Content -->
  @if (committee()?.id && !loading() && !error()) {
    <div class="flex flex-col gap-6">
      <!-- Header Section -->
      <div class="flex justify-between items-start">
        <div>
          <div class="flex items-center gap-3 mb-2">
            <button (click)="goBack()" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
              <i class="fa-light fa-arrow-left mr-2"></i>
              Back to Committees
            </button>
          </div>
          <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ committee()?.name }}</h1>
          <div class="flex items-center gap-4 text-sm text-gray-500">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
              {{ committee()?.category }}
            </span>
            <span>Created {{ formattedCreatedDate() }}</span>
            @if (committee()?.updated_at) {
              <span>Last updated {{ formattedUpdatedDate() }}</span>
            }
          </div>
        </div>

        <!-- Action Menu -->
        <div class="flex items-center gap-3">
          <lfx-menu #actionMenu [model]="actionMenuItems" [popup]="true"> </lfx-menu>
          <lfx-button icon="fa-light fa-ellipsis-vertical" styleClass="p-button-outlined p-button-sm" (onClick)="toggleActionMenu($event, actionMenu)">
          </lfx-button>
        </div>
      </div>

      <!-- Main Content Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Committee Details -->
        <div class="lg:col-span-2 flex flex-col gap-6">
          <!-- Members Section -->
          @if (committee()?.id) {
            <lfx-committee-members
              [committee]="committee()"
              [members]="members()"
              [membersLoading]="membersLoading()"
              (refresh)="refreshMembers()"></lfx-committee-members>
          }

          <!-- Subcommittees Section -->
          @if (committee()?.subcommittees && (committee()?.subcommittees)!.length > 0) {
            <lfx-card title="Subcommittees">
              <lfx-table [value]="committee()?.subcommittees!" [paginator]="false">
                <ng-template #header>
                  <tr>
                    <th class="text-sm font-sans text-gray-500">Name</th>
                    <th class="text-sm font-sans text-gray-500">Category</th>
                    <th class="text-sm font-sans text-gray-500">Members</th>
                    <th class="text-sm font-sans text-gray-500">Voting Reps</th>
                    <th class="text-center text-sm font-sans text-gray-500">Actions</th>
                  </tr>
                </ng-template>

                <ng-template #body let-subcommittee>
                  <tr>
                    <td class="font-medium">{{ subcommittee.name }}</td>
                    <td>
                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                        {{ subcommittee.category }}
                      </span>
                    </td>
                    <td class="text-center">{{ subcommittee.total_members }}</td>
                    <td class="text-center">{{ subcommittee.total_voting_reps }}</td>
                    <td class="text-center">
                      <button class="text-blue-600 hover:text-blue-800 text-sm">View Details</button>
                    </td>
                  </tr>
                </ng-template>
              </lfx-table>
            </lfx-card>
          }
        </div>

        <!-- Right Column - Settings & Stats -->
        <div class="flex flex-col gap-6">
          <!-- Upcoming Meeting -->
          <lfx-card title="Next Meeting">
            @if (committee()?.id) {
              <lfx-upcoming-committee-meeting [committeeId]="committee()!.id"></lfx-upcoming-committee-meeting>
            }
          </lfx-card>

          <!-- Committee Information & Statistics -->
          <lfx-card title="Committee Details">
            <div class="">
              @if (committee()?.description) {
                <div class="pb-4 border-b border-gray-100">
                  <h4 class="font-medium text-gray-700 mb-2">Description</h4>
                  <p class="text-gray-500 text-sm">{{ committee()?.description }}</p>
                </div>
              }

              <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-gray-600">Total Members</span>
                <span class="font-semibold text-gray-900">{{ committee()?.total_members || 0 }}</span>
              </div>

              <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-gray-600">Voting Representatives</span>
                <span class="font-semibold text-gray-900">{{ committee()?.total_voting_reps || 0 }}</span>
              </div>

              <div class="flex justify-between items-center py-2 border-t border-gray-100">
                <span class="text-gray-600">Subcommittees</span>
                <span class="font-semibold text-gray-900">{{ committee()?.subcommittees?.length || 0 }}</span>
              </div>

              @if (committee()?.committee_website) {
                <div class="flex justify-between items-center py-2 border-t border-gray-100">
                  <span class="text-gray-600">Website</span>
                  <a [href]="committee()?.committee_website" target="_blank" class="text-blue-600 hover:text-blue-800 underline text-sm">
                    {{ committee()?.committee_website }}
                  </a>
                </div>
              }

              @if (committee()?.public_name) {
                <div class="flex justify-between items-center py-2 border-t border-gray-100">
                  <span class="text-gray-600">Public Name</span>
                  <span class="text-gray-900">{{ committee()?.public_name }}</span>
                </div>
              }

              @if (committee()?.sso_group_name) {
                <div class="flex justify-between items-center py-2 border-t border-gray-100">
                  <span class="text-gray-600">SSO Group</span>
                  <span class="text-gray-900">{{ committee()?.sso_group_name }}</span>
                </div>
              }
            </div>
          </lfx-card>

          <!-- Committee Settings -->
          <lfx-card title="Settings">
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-gray-600 text-sm">Public Enabled</span>
                <span class="inline-flex items-center">
                  <i
                    class="fa-light text-sm mr-1"
                    [class.fa-check-circle]="committee()?.public_enabled"
                    [class.text-green-500]="committee()?.public_enabled"
                    [class.fa-times-circle]="!committee()?.public_enabled"
                    [class.text-red-500]="!committee()?.public_enabled"></i>
                  <span class="text-sm" [class.text-green-600]="committee()?.public_enabled" [class.text-red-600]="!committee()?.public_enabled">
                    {{ committee()?.public_enabled ? 'Enabled' : 'Disabled' }}
                  </span>
                </span>
              </div>

              <div class="flex justify-between items-center">
                <span class="text-gray-600 text-sm">Voting Enabled</span>
                <span class="inline-flex items-center">
                  <i
                    class="fa-light text-sm mr-1"
                    [class.fa-check-circle]="committee()?.enable_voting"
                    [class.text-green-500]="committee()?.enable_voting"
                    [class.fa-times-circle]="!committee()?.enable_voting"
                    [class.text-red-500]="!committee()?.enable_voting"></i>
                  <span class="text-sm" [class.text-green-600]="committee()?.enable_voting" [class.text-red-600]="!committee()?.enable_voting">
                    {{ committee()?.enable_voting ? 'Enabled' : 'Disabled' }}
                  </span>
                </span>
              </div>

              <div class="flex justify-between items-center">
                <span class="text-gray-600 text-sm">Business Email Required</span>
                <span class="inline-flex items-center">
                  <i
                    class="fa-light text-sm mr-1"
                    [class.fa-check-circle]="committee()?.business_email_required"
                    [class.text-green-500]="committee()?.business_email_required"
                    [class.fa-times-circle]="!committee()?.business_email_required"
                    [class.text-red-500]="!committee()?.business_email_required"></i>
                  <span
                    class="text-sm"
                    [class.text-green-600]="committee()?.business_email_required"
                    [class.text-red-600]="!committee()?.business_email_required">
                    {{ committee()?.business_email_required ? 'Enabled' : 'Disabled' }}
                  </span>
                </span>
              </div>

              <div class="flex justify-between items-center">
                <span class="text-gray-600 text-sm">SSO Group Enabled</span>
                <span class="inline-flex items-center">
                  <i
                    class="fa-light text-sm mr-1"
                    [class.fa-check-circle]="committee()?.sso_group_enabled"
                    [class.text-green-500]="committee()?.sso_group_enabled"
                    [class.fa-times-circle]="!committee()?.sso_group_enabled"
                    [class.text-red-500]="!committee()?.sso_group_enabled"></i>
                  <span class="text-sm" [class.text-green-600]="committee()?.sso_group_enabled" [class.text-red-600]="!committee()?.sso_group_enabled">
                    {{ committee()?.sso_group_enabled ? 'Enabled' : 'Disabled' }}
                  </span>
                </span>
              </div>

              <div class="flex justify-between items-center">
                <span class="text-gray-600 text-sm">Audit Enabled</span>
                <span class="inline-flex items-center">
                  <i
                    class="fa-light text-sm mr-1"
                    [class.fa-check-circle]="committee()?.is_audit_enabled"
                    [class.text-green-500]="committee()?.is_audit_enabled"
                    [class.fa-times-circle]="!committee()?.is_audit_enabled"
                    [class.text-red-500]="!committee()?.is_audit_enabled"></i>
                  <span class="text-sm" [class.text-green-600]="committee()?.is_audit_enabled" [class.text-red-600]="!committee()?.is_audit_enabled">
                    {{ committee()?.is_audit_enabled ? 'Enabled' : 'Disabled' }}
                  </span>
                </span>
              </div>
            </div>
          </lfx-card>
        </div>
      </div>
    </div>
  }

  <!-- Confirmation Dialog -->
  <p-confirmDialog></p-confirmDialog>
</div>