@if (showActions()) {
  <div class="d-flex justify-content-end">
    <button
      class="align-items-center d-flex"
      mat-stroked-button
      [disabled]="dataSource?.data.length < 2"
      (click)="onTransferBalance()"
    >
      <ion-icon class="mr-2" name="arrow-redo-outline" />
      <span><ng-container i18n>Transfer Cash Balance</ng-container>...</span>
    </button>
  </div>
}

<div class="overflow-x-auto">
  <table
    class="gf-table w-100"
    mat-table
    matSort
    matSortActive="name"
    matSortDirection="asc"
    [dataSource]="dataSource"
  >
    <ng-container matColumnDef="status">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-1"
        mat-header-cell
      ></th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        <div class="d-flex justify-content-center">
          @if (element.isExcluded) {
            <ion-icon name="eye-off-outline" />
          }
        </div>
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1"
        mat-footer-cell
      ></td>
    </ng-container>

    <ng-container matColumnDef="account">
      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
        <ng-container i18n>Name</ng-container>
      </th>
      <td *matCellDef="let element" class="px-1" mat-cell>
        @if (element.platform?.url) {
          <gf-entity-logo
            class="d-inline d-sm-none mr-1"
            [tooltip]="element.platform?.name"
            [url]="element.platform.url"
          />
        }
        <span>{{ element.name }}</span>
      </td>
      <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
    </ng-container>

    <ng-container matColumnDef="currency">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Currency</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        {{ element.currency }}
      </td>
      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
        {{ baseCurrency() }}
      </td>
    </ng-container>

    <ng-container matColumnDef="platform">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-1"
        mat-header-cell
        mat-sort-header="platform.name"
      >
        <ng-container i18n>Platform</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        <div class="d-flex">
          @if (element.platform?.url) {
            <gf-entity-logo
              class="mr-1"
              [tooltip]="element.platform?.name"
              [url]="element.platform.url"
            />
          }
          <span>{{ element.platform?.name }}</span>
        </div>
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1"
        mat-footer-cell
      ></td>
    </ng-container>

    <ng-container matColumnDef="activitiesCount">
      <th
        *matHeaderCellDef
        class="justify-content-end px-1"
        mat-header-cell
        mat-sort-header="activitiesCount"
      >
        <span class="d-block d-sm-none">#</span>
        <span class="d-none d-sm-block" i18n>Activities</span>
      </th>
      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
        {{ element.activitiesCount }}
      </td>
      <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
        {{ activitiesCount() }}
      </td>
    </ng-container>

    <ng-container matColumnDef="balance">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Cash Balance</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1 text-right"
        mat-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="element.balance"
        />
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1 text-right"
        mat-footer-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="totalBalanceInBaseCurrency()"
        />
      </td>
    </ng-container>

    <ng-container matColumnDef="value">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Value</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1 text-right"
        mat-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="element.value"
        />
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1 text-right"
        mat-footer-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="totalValueInBaseCurrency()"
        />
      </td>
    </ng-container>

    <ng-container matColumnDef="valueInBaseCurrency">
      <th
        *matHeaderCellDef
        class="d-lg-none d-xl-none justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Value</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-lg-none d-xl-none px-1 text-right"
        mat-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="element.valueInBaseCurrency"
        />
      </td>
      <td
        *matFooterCellDef
        class="d-lg-none d-xl-none px-1 text-right"
        mat-footer-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isCurrency]="true"
          [locale]="locale()"
          [value]="totalValueInBaseCurrency()"
        />
      </td>
    </ng-container>

    <ng-container matColumnDef="allocation">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Allocation</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1 text-right"
        mat-cell
      >
        <gf-value
          class="d-inline-block justify-content-end"
          [isPercent]="true"
          [locale]="locale()"
          [precision]="2"
          [value]="element.allocationInPercentage"
        />
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1"
        mat-footer-cell
      ></td>
    </ng-container>

    <ng-container matColumnDef="comment">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell px-1"
        mat-header-cell
      ></th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        @if (element.comment) {
          <button
            class="mx-1 no-min-width px-2"
            mat-button
            title="Note"
            (click)="onOpenComment(element.comment); $event.stopPropagation()"
          >
            <ion-icon name="document-text-outline" />
          </button>
        }
      </td>
      <td
        *matFooterCellDef
        class="d-none d-lg-table-cell px-1"
        mat-footer-cell
      ></td>
    </ng-container>

    <ng-container matColumnDef="actions" stickyEnd>
      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
        <button
          class="mx-1 no-min-width px-2"
          mat-button
          [matMenuTriggerFor]="accountMenu"
          (click)="$event.stopPropagation()"
        >
          <ion-icon name="ellipsis-horizontal" />
        </button>
        <mat-menu #accountMenu="matMenu" xPosition="before">
          <button mat-menu-item (click)="onOpenAccountDetailDialog(element.id)">
            <span class="align-items-center d-flex">
              <ion-icon class="mr-2" name="wallet-outline" />
              <span><ng-container i18n>View Details</ng-container>...</span>
            </span>
          </button>
          <button mat-menu-item (click)="onUpdateAccount(element)">
            <span class="align-items-center d-flex">
              <ion-icon class="mr-2" name="create-outline" />
              <span><ng-container i18n>Edit</ng-container>...</span>
            </span>
          </button>
          <hr class="m-0" />
          <button
            mat-menu-item
            [disabled]="element.activitiesCount > 0"
            (click)="onDeleteAccount(element.id)"
          >
            <span class="align-items-center d-flex">
              <ion-icon class="mr-2" name="trash-outline" />
              <span i18n>Delete</span>
            </span>
          </button>
        </mat-menu>
      </td>
      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
    <tr
      *matRowDef="let row; columns: displayedColumns()"
      mat-row
      [class.cursor-pointer]="hasPermissionToOpenDetails()"
      (click)="onOpenAccountDetailDialog(row.id)"
    ></tr>
    <tr
      *matFooterRowDef="displayedColumns()"
      mat-footer-row
      [class.d-none]="isLoading() || !showFooter()"
    ></tr>
  </table>
</div>

@if (isLoading()) {
  <ngx-skeleton-loader
    animation="pulse"
    class="px-4 py-3"
    [theme]="{
      height: '1.5rem',
      width: '100%'
    }"
  />
}