<h2 mat-dialog-title style="text-align: center">{{owner}}/{{repositoryName}}</h2>
<mat-dialog-content>
  <div class="loading" *ngIf="loading">
    <mat-spinner [strokeWidth]="4"></mat-spinner>
    <div>Loading...</div>
  </div>
  <div *ngIf="!pageActivated && !loading">
    The website is not activated.
  </div>
  <div *ngIf="pageActivated">
     <h4>Page Information</h4>
    <div>
      <span>Last status: </span><span>{{status}}</span>
    </div>
    <div>
      <span>Url: </span><a href="{{html_url}}">{{html_url}}</a>
    </div>
    <div>
      <span>Branch: </span><span>{{branch}}</span>
    </div>
    <div>
      <span>Path: </span><span>{{path}}</span>
    </div>
  </div>
  <div *ngIf="pageActivated">
    <h4>Build History</h4>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 history-table">

      <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

      <!-- status Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> status </th>
        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
      </ng-container>

      <!-- updateDate Column -->
      <ng-container matColumnDef="updateDate">
        <th mat-header-cell *matHeaderCellDef> updateDate </th>
        <td mat-cell *matCellDef="let element"> {{element.updateDate}} </td>
      </ng-container>

      <!-- duration Column -->
      <ng-container matColumnDef="duration">
        <th mat-header-cell *matHeaderCellDef> duration </th>
        <td mat-cell *matCellDef="let element"> {{element.duration}} </td>
      </ng-container>


      <!-- who Column -->
      <ng-container matColumnDef="who">
        <th mat-header-cell *matHeaderCellDef> who </th>
        <td mat-cell *matCellDef="let element"> {{element.who}} </td>
      </ng-container>

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

</mat-dialog-content>