board-member-dashboard.component.html

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

<div class="container mx-auto px-4 sm:px-6 lg:px-8" data-testid="dashboard-container">
  <!-- Foundation Project -->
  @if (selectedFoundation()) {
    <div class="mb-6 flex items-center gap-4" data-testid="foundation-project">
      <h1 class="text-2xl font-serif font-semibold text-gray-900">{{ selectedFoundation()?.name }} Overview</h1>
    </div>
  }

  <!-- Organization Selector -->
  <div class="mb-6 flex items-center gap-4" data-testid="organization-selector">
    <label for="organization-select" class="text-sm font-semibold text-gray-700">Organization:</label>
    <lfx-select
      [form]="form"
      control="selectedAccountId"
      [options]="availableAccounts()"
      optionLabel="accountName"
      optionValue="accountId"
      [filter]="true"
      filterPlaceholder="Search organizations..."
      placeholder="Select an organization"
      [showClear]="false"
      styleClass="min-w-[300px]"
      inputId="organization-select"
      data-testid="organization-select" />
  </div>

  <!-- Dashboard Sections -->
  <div class="flex flex-col gap-6" data-testid="dashboard-sections-grid">
    <!-- Organization Involvement - Full Width -->
    <lfx-organization-involvement />

    <!-- Middle Row - Two Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Pending Actions -->
      <lfx-pending-actions class="h-full" />

      <!-- My Meetings -->
      <lfx-my-meetings class="h-full" />
    </div>

    <!-- Foundation Health - Full Width -->
    <lfx-foundation-health />
  </div>
</div>