<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!services" overlayParent></app-fl-backdrop>
  <div *ngIf="services" layoutDirection="column">
    <table class="full-width" mat-table [dataSource]="services">
      <ng-container matColumnDef="display_name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td class="position-relative" mat-cell *matCellDef="let service">
          <app-status-line [direction]="LineDirection.Vertical" [type]="service.appLineType"
                           [color]="service.appLineColor"></app-status-line>
          <a class="active-link" [routerLink]="config.getPanelUrl('billing/services/') + service.id">
            {{service.display_name}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="cycle">
        <th mat-header-cell *matHeaderCellDef class="hide-xs hide-sm" i18n>Cycle</th>
        <td mat-cell *matCellDef="let service" class="hide-xs hide-sm" i18n>
          {{service.cycle?.display_name | nullValue}} <span *ngIf="service.is_free">(free)</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="activated">
        <th mat-header-cell *matHeaderCellDef class="hide-xs hide-sm" i18n>Activated</th>
        <td mat-cell *matCellDef="let service" class="hide-xs hide-sm">
          <app-date-displayer [date]="service.activated_at"></app-date-displayer>
        </td>
      </ng-container>
      <ng-container matColumnDef="paid_until">
        <th mat-header-cell *matHeaderCellDef i18n>Paid until</th>
        <td mat-cell *matCellDef="let service">
          <app-date-displayer [date]="service.paid_until"></app-date-displayer>
        </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef i18n>Status</th>
        <td mat-cell *matCellDef="let service">{{service.status}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>
