<div class="content">
  <div class="default-header"><h1>Servers</h1></div>
  <div class="default-content">
    <app-server-discovery></app-server-discovery>

    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <a *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'" [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a>
            <span *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote' && row.location !== 'bundled'">{{ row.name }}</span>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="location">
          <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.location }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="ip">
          <mat-header-cell *matHeaderCellDef> Host </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.host }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="port">
          <mat-header-cell *matHeaderCellDef> Port </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.port }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell *matCellDef="let row" style="text-align: right">
            <button mat-icon-button (click)="startServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'stopped'">
              <mat-icon aria-label="Start server">play_arrow</mat-icon>
            </button>

            <button mat-icon-button (click)="stopServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'running'">
              <mat-icon aria-label="Stop server">stop</mat-icon>
            </button>

            <mat-spinner [diameter]="24" *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"></mat-spinner>
            
            <button mat-icon-button (click)="deleteServer(row)">
              <mat-icon aria-label="Remove server">delete</mat-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </div>

    <div class="buttons-bar">
      <button *ngIf="isElectronApp" mat-raised-button class="button" (click)="startLocalServer()">Start local server</button>
      <button mat-raised-button class="button" color="primary" (click)="createModal()">Add server</button>
    </div>
  </div>
</div>
