<div class="container">
  <div class="row">
    <div class="col">
      <table class="gf-table w-100">
        <thead>
          <tr class="mat-header-row">
            <th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
            <th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
            <th class="mat-header-cell px-1 py-2" i18n>First Activity</th>
            <th class="mat-header-cell px-1 py-2" i18n>Activity Count</th>
            <th class="mat-header-cell px-1 py-2" i18n>Historical Data</th>
            <th class="mat-header-cell px-1 py-2"></th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of marketData; let i = index">
            <tr
              class="cursor-pointer mat-row"
              (click)="setCurrentProfile({ dataSource: item.dataSource, symbol: item.symbol })"
            >
              <td class="mat-cell px-1 py-2">{{ item.symbol }}</td>
              <td class="mat-cell px-1 py-2">{{ item.dataSource }}</td>
              <td class="mat-cell px-1 py-2">
                {{ (item.date | date: defaultDateFormat) ?? '' }}
              </td>
              <td class="mat-cell px-1 py-2">{{ item.activityCount }}</td>
              <td class="mat-cell px-1 py-2">{{ item.marketDataItemCount }}</td>
              <td class="mat-cell px-1 py-2">
                <button
                  class="mx-1 no-min-width px-2"
                  mat-button
                  [matMenuTriggerFor]="accountMenu"
                  (click)="$event.stopPropagation()"
                >
                  <ion-icon name="ellipsis-vertical"></ion-icon>
                </button>
                <mat-menu #accountMenu="matMenu" xPosition="before">
                  <button
                    i18n
                    mat-menu-item
                    (click)="onGatherSymbol({dataSource: item.dataSource, symbol: item.symbol})"
                  >
                    Gather Data
                  </button>
                  <button
                    i18n
                    mat-menu-item
                    (click)="onGatherProfileDataBySymbol({dataSource: item.dataSource, symbol: item.symbol})"
                  >
                    Gather Profile Data
                  </button>
                  <button
                    i18n
                    mat-menu-item
                    [disabled]="item.activityCount !== 0"
                    (click)="onDeleteProfileData({dataSource: item.dataSource, symbol: item.symbol})"
                  >
                    Delete Profile Data
                  </button>
                </mat-menu>
              </td>
            </tr>
            <tr *ngIf="currentSymbol === item.symbol" class="mat-row">
              <td class="p-1" colspan="6">
                <gf-admin-market-data-detail
                  [dataSource]="item.dataSource"
                  [dateOfFirstActivity]="item.date"
                  [locale]="user?.settings?.locale"
                  [marketData]="marketDataDetails"
                  [symbol]="item.symbol"
                  (marketDataChanged)="onMarketDataChanged($event)"
                ></gf-admin-market-data-detail>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </div>
  </div>
</div>
