@if (services && services.length > 0) {
  <table mat-table matSort [dataSource]="services"
    (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">
    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let service">
        <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
      </td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
      <td mat-cell *matCellDef="let service" class="text-center">
        @if (service.url) {
          <a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button
            color="accent">
            <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
            @if (!service.sameSite) {
              <mat-icon inline="true">
              open_in_new</mat-icon>
            }
          </a>
        }
        @if (!service.url) {
          <a mat-button disabled>
            <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
          </a>
        }
        <div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
      </td>
    </ng-container>
    <ng-container matColumnDef="text">
      <th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
      <td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: serviceColumns"></tr>
  </table>
}