<div class="page-spacing">
  <!-- Page header -->
  <div class="page-header">
    <h1 class="page-title">{{ pageTitle() | translate }}</h1>
    <p class="page-description">{{ pageSubtitle() | translate }}</p>
  </div>

  <!-- Toolbar -->
  <div class="activity-toolbar">
    <!-- Month picker -->
    <pa-select
      class="month-picker"
      [label]="'activity.select-month' | translate"
      [value]="selectedMonth()"
      (valueChange)="onMonthChange($event)">
      @for (month of monthOptions(); track month) {
        <pa-option [value]="month">{{ formatMonth(month) }}</pa-option>
      }
    </pa-select>

    <div class="toolbar-actions">
      <!-- Extra toolbar buttons projected by child pages (e.g. filters) -->
      <ng-content select="[toolbar-extra]"></ng-content>

      <!-- Columns toggle -->
      <nsi-dropdown-button
        [popupRef]="columnsDropdown"
        [alignLeft]="false"
        aspect="basic">
        {{ 'activity.columns' | translate }}
      </nsi-dropdown-button>
      <pa-dropdown #columnsDropdown>
        @for (col of service.columnDefs(); track col.key) {
          <pa-option
            [value]="col.key"
            dontCloseOnSelect
            (selectOption)="toggleColumn(col.key)">
            <pa-checkbox [value]="isColumnVisible(col.key)">
              {{ col.label | translate }}
            </pa-checkbox>
          </pa-option>
        }
      </pa-dropdown>

      <!-- Download -->
      @if (showDownload()) {
        <nsi-dropdown-button
          [popupRef]="downloadDropdown"
          [alignLeft]="false"
          aspect="basic"
          icon="download">
          {{ 'activity.download' | translate }}
        </nsi-dropdown-button>
        <pa-dropdown #downloadDropdown>
          <pa-option (selectOption)="onDownload('text/csv')">
            {{ 'activity.download-csv' | translate }}
          </pa-option>
          <pa-option (selectOption)="onDownload('application/x-ndjson')">
            {{ 'activity.download-ndjson' | translate }}
          </pa-option>
        </pa-dropdown>
      }
    </div>

    @if (showSearch()) {
      <nsi-search-input
        class="toolbar-search"
        [placeholder]="'generic.search' | translate"
        [modes]="service.searchModes()"
        (valueChange)="onSearch($event)"
        (modeSelected)="onModeSelected($event)"></nsi-search-input>
    }
  </div>

  <!-- Stat cards slot — projected by each page -->
  <ng-content select="[stat-cards]"></ng-content>

  <!-- Data table -->
  <div class="table-container">
    @if (loading()) {
      <nsi-spinner></nsi-spinner>
    } @else if (items().length === 0) {
      <div class="empty-state">
        <p class="body-m">{{ 'generic.empty' | translate }}</p>
      </div>
    } @else {
      <cdk-virtual-scroll-viewport
        tableVirtualScroll
        class="table-viewport"
        [itemSize]="rowHeight"
        (offsetChange)="viewportOffset = $event"
        (scrolledIndexChange)="onScrolledIndexChange($event)">
        @if (loadingMore()) {
          <div class="loading-more-row"><nsi-spinner class="loading-more-spinner"></nsi-spinner></div>
        }
        <pa-table
          border
          [style.--table-row-height]="rowHeight + 'px'"
          [style.--table-header-top]="-1 * viewportOffset + 'px'"
          [columns]="computedGridColumns()">
          <pa-table-header>
            <pa-table-row>
              @for (col of service.columnDefs(); track col.key) {
                @if (isColumnVisible(col.key)) {
                  <pa-table-cell header>
                    {{ col.label | translate }}
                  </pa-table-cell>
                }
              }
              @if (rowAction()) {
                <pa-table-cell
                  header
                  class="action-col-header"></pa-table-cell>
              }
            </pa-table-row>
          </pa-table-header>

          <pa-table-row
            *cdkVirtualFor="let item of items()"
            (click)="onRowClick(item)"
            class="clickable-row">
            @for (col of service.columnDefs(); track col.key) {
              @if (isColumnVisible(col.key)) {
                <pa-table-cell>
                  @if (col.inlineAction) {
                    <div class="cell-inline-action-wrapper">
                      <span
                        class="body-s cell-value"
                        [class.remi-score-low]="isRemiScoreLow(item, col)"
                        [class.remi-score-mid]="isRemiScoreMid(item, col)"
                        [class.remi-score-high]="isRemiScoreHigh(item, col)"
                        [paTooltip]="getCellValue(item, col.key)">
                        {{ getCellValue(item, col.key) }}
                      </span>
                      @if (col.inlineAction.visible(item)) {
                        <pa-button
                          class="inline-action-btn"
                          [icon]="col.inlineAction.icon"
                          kind="primary"
                          aspect="basic"
                          [paTooltip]="col.inlineAction.tooltip | translate"
                          (click)="$event.stopPropagation(); rowActionTriggered.emit(item)"></pa-button>
                      }
                    </div>
                  } @else {
                    <span
                      class="body-s cell-value"
                      [class.remi-score-low]="isRemiScoreLow(item, col)"
                      [class.remi-score-mid]="isRemiScoreMid(item, col)"
                      [class.remi-score-high]="isRemiScoreHigh(item, col)"
                      [paTooltip]="getCellValue(item, col.key)">
                      {{ getCellValue(item, col.key) }}
                    </span>
                  }
                </pa-table-cell>
              }
            }
            @if (rowAction()) {
              <pa-table-cell class="action-col-cell">
                @if (rowAction()!.visible(item)) {
                  <button
                    class="row-action-btn"
                    [paTooltip]="rowAction()!.tooltip | translate"
                    (click)="$event.stopPropagation(); rowActionTriggered.emit(item)">
                    <pa-icon [name]="rowAction()!.icon"></pa-icon>
                  </button>
                }
              </pa-table-cell>
            }
          </pa-table-row>
        </pa-table>
      </cdk-virtual-scroll-viewport>
    }
  </div>
</div>

@if (selectedItem(); as item) {
  <div
    class="side-panel-backdrop"
    (click)="closeSidePanel()"></div>
  <aside
    class="side-panel"
    [class.expanded]="sidePanelExpanded()">
    <div class="side-panel-header">
      <h2 class="title-m">{{ pageTitle() | translate }}</h2>
      <div class="side-panel-header-actions">
        <pa-button
          aspect="basic"
          [icon]="sidePanelExpanded() ? 'collapse' : 'expand'"
          size="small"
          (click)="toggleSidePanelExpand()"></pa-button>
        <pa-button
          aspect="basic"
          icon="cross"
          size="small"
          (click)="closeSidePanel()"></pa-button>
      </div>
    </div>
    <div class="side-panel-body">
      @for (section of sidebarGroups(); track section.group) {
        @if (hasGroupData(item, section.fields)) {
          <section class="detail-section">
            <h3 class="title-s section-title">{{ section.labelKey | translate }}</h3>
            <div class="detail-card">
              @for (field of section.fields; track field.key) {
                @if (isFieldVisible(item, field)) {
                  @if (field.expandable) {
                    <div class="detail-inner-card">
                      <pa-expander [expanded]="false">
                        <pa-expander-header>
                          <span class="detail-inner-label overline">{{ field.label | translate }}</span>
                        </pa-expander-header>
                        <pa-expander-body>
                          <p class="body-s detail-expandable-content">{{ getFieldValue(selectedItem()!, field) }}</p>
                        </pa-expander-body>
                      </pa-expander>
                    </div>
                  } @else {
                    <div class="detail-row">
                      <span class="detail-label body-s">{{ field.label | translate }}</span>
                      <span
                        class="detail-value body-s"
                        [class.remi-score-low]="field.colorFn?.(item) === 'low'"
                        [class.remi-score-mid]="field.colorFn?.(item) === 'mid'"
                        [class.remi-score-high]="field.colorFn?.(item) === 'high'">
                        {{ getFieldValue(selectedItem()!, field) }}
                      </span>
                    </div>
                  }
                }
              }
            </div>
          </section>
        }
      }
    </div>
  </aside>
}
