
<!-- Loading skeleton -->
<ng-container *ngIf="dbLoading">

  <app-loading-skeleton
    amount="3"
    colClass="col-4 mb-3 mt-3"
    blockHeight="250px"
    hasShadow="true">
  </app-loading-skeleton>

</ng-container>

<!-- Database tables -->
<div class="masonry" *ngIf="!dbLoading">
  <div class="grid py-3" *ngFor="let item of (tables | async)">

    <mat-card
      [id]="item.name"
      [class]="activeTable === item.name ? 'active' : ''">
      <mat-card-content>

        <div class="d-flex align-items-center justify-content-between mb-3">
          <p class="fw-bold mb-0 table-title mx-3">{{item.name}}</p>
          <div class="d-flex align-items-center justify-content-between action-btn">

            <button
              mat-icon-button
              color="primary"
              (click)="addColumnOrKey(item)"
              matTooltip="Add field or foreign key ..."
              matTooltipPosition="above">
              <mat-icon>add</mat-icon>
            </button>

            <div class="me-1"></div>

            <button
              mat-icon-button
              color="primary"
              (click)="downloadTableAsCsv(item)"
              matTooltip="Download table as CSV ..."
              matTooltipPosition="above">
              <mat-icon>file_download</mat-icon>
            </button>

            <div class="me-1"></div>

            <button
              mat-icon-button
              color="primary"
              matTooltip="Export table DDL ..."
              matTooltipPosition="above"
              (click)="viewTableDDL(item.name)">
              <mat-icon>extension</mat-icon>
            </button>

            <div class="me-1"></div>

            <button
              mat-icon-button color="warn"
              matTooltip="Drop table ..."
              matTooltipPosition="above"
              (click)="dropItem(item, 'table')">
              <mat-icon>delete</mat-icon>
            </button>

          </div>
        </div>

        <div class="row hoverable-row py-1 align-items-center" *ngFor="let column of item.columns">

          <div class="col-lg-6 col-5">
            <p class="text-truncate my-0 table-icons">
              <mat-icon
                *ngIf="column.primary"
                title="Primary key">
                key
              </mat-icon>
              <mat-icon
                *ngIf="column?.nullable === true && !column.primary"
                class="flipped text-muted"
                title="Nullable">
                motion_photos_off
              </mat-icon>
              {{column.name}}
            </p>
          </div>

          <div class="col-5">
            <p class="small text-muted my-0">
              {{column.db}}
            </p>
          </div>

          <div class="col-lg-1 col-2 action-btn d-flex justify-content-end">

            <button
              mat-icon-button
              color="warn"
              matTooltipPosition="before"
              matTooltip="Drop column ..."
              (click)="dropItem(column, 'column', item.foreign_keys, item.name, item)">
              <mat-icon>delete</mat-icon>
            </button>

          </div>

        </div>

        <hr class="mt-4 divider" *ngIf="(item.foreign_keys && item.foreign_keys.length > 0) || (item.indexes && item.indexes.length > 0)">

        <!-- Foreign keys -->
        <div class="row mt-4" *ngIf="item.foreign_keys && item.foreign_keys.length > 0">

          <div
            class="col-12 bg-light action-btn pointer py-0 small ps-3 py-1"
            (click)="scrollTableIntoView(fk)"
            *ngFor="let fk of item.foreign_keys;let last = last"
            [class.mb-2]="!last">

            <div class="d-flex justify-content-between align-items-center">
              <p class="my-0 d-flex justify-content-between align-items-center text-muted">
                {{fk?.column}} <mat-icon class="mx-2">trending_flat</mat-icon>
                {{fk?.foreign_table}}.{{fk.foreign_column}}
              </p>
            </div>

          </div>

        </div>

        <!-- Indexes -->
        <div class="row mt-4" *ngIf="item.indexes && item.indexes.length > 0">

          <div
            class="col-12 bg-light action-btn py-0 small ps-3 py-1"
            *ngFor="let idx of item.indexes;let last = last"
            [class.mb-2]="!last">

            <div class="d-flex justify-content-between align-items-center">
              <p class="my-0 d-flex justify-content-between align-items-center text-muted">
                {{idx?.name}} <mat-icon class="mx-2">swap_horiz</mat-icon>
                <span *ngFor="let col of idx.columns;let lastCol = last">{{col + (lastCol ? '' : ', ')}}</span>
              </p>

              <button
                mat-icon-button
                color="warn"
                matTooltip="Drop index ..."
                matTooltipPosition="before"
                (click)="dropItem(idx, 'index', item.foreign_keys, item.name)">
                <mat-icon>delete</mat-icon>
              </button>

            </div>

          </div>

        </div>

      </mat-card-content>
    </mat-card>

  </div>
</div>
