<div *ngIf="object" class="fl-content" layoutDirection="column">
  <ng-container *ngIf="ruleList && ruleList.objects.length > 0; else noRules">
    <table mat-table [dataSource]="ruleList.objects" class="full-width fl-margin-bottom">
      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef i18n>Type</th>
        <td mat-cell *matCellDef="let rule">
          <a class="active-link"
             [routerLink]="[config.getPanelUrl('openstack/load-balancers'), loadBalancerId, 'listeners',
              object.id, 'policy', policyId, 'rule', rule.id ]"
             [queryParamsHandling]="'merge'">
            {{rule.type}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="compare_type">
        <th mat-header-cell *matHeaderCellDef i18n>Compare type</th>
        <td mat-cell *matCellDef="let rule">
          {{rule.compare_type}}
        </td>
      </ng-container>
      <ng-container matColumnDef="key">
        <th mat-header-cell *matHeaderCellDef i18n class="hide-xs">Key</th>
        <td mat-cell *matCellDef="let rule" class="hide-xs">
          {{rule.key | nullValue}}
        </td>
      </ng-container>
      <ng-container matColumnDef="value">
        <th mat-header-cell *matHeaderCellDef i18n class="hide-xs">Value</th>
        <td mat-cell *matCellDef="let rule" class="hide-xs">
          {{rule.value | nullValue}}
        </td>
      </ng-container>
      <ng-container matColumnDef="invert">
        <th mat-header-cell *matHeaderCellDef i18n>Invert</th>
        <td mat-cell *matCellDef="let rule">
          {{rule.invert | yesNo}}
        </td>
      </ng-container>
      <ng-container matColumnDef="operating_status">
        <th mat-header-cell *matHeaderCellDef i18n>Operating status</th>
        <td mat-cell *matCellDef="let rule">
          {{rule.operating_status}}
        </td>
      </ng-container>
      <ng-container matColumnDef="provisioning_status">
        <th mat-header-cell *matHeaderCellDef class="hide-xs" i18n>Provisioning status</th>
        <td mat-cell *matCellDef="let rule" class="hide-xs">
          {{rule.provisioning_status}}
        </td>
      </ng-container>
      <ng-container matColumnDef="admin_state_up">
        <th mat-header-cell *matHeaderCellDef class="hide-xs" i18n>Admin state up</th>
        <td mat-cell *matCellDef="let rule" class="hide-xs">
          {{rule.admin_state_up | yesNo }}
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef i18n></th>
        <td mat-cell *matCellDef="let rule">
          <app-object-actions [objectActions]="ruleActions[rule.id]" [maxVisibleActions]="2">
          </app-object-actions>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let rule; columns: displayedColumns;"></tr>
    </table>
  </ng-container>
  <ng-template #noRules>
    <p *ngIf="ruleList" class="fl-detail fl-margin-bottom" layoutAlign="center center" i18n>No rules.</p>
    <p *ngIf="!ruleList" class="fl-detail fl-margin-bottom" layoutAlign="center center" i18n>Loading rules ...</p>
  </ng-template>
  <div layoutDirection="row" layoutAlign="center center">
    <a mat-fab fl-tooltip="Create rule" i18n-fl-tooltip
       [routerLink]="[config.getPanelUrl('openstack/load-balancers', loadBalancerId), 'listeners', object.id,
       'policy', policyId, 'rule-create']" [queryParamsHandling]="'merge'">
      <mat-icon>add</mat-icon>
    </a>
  </div>
</div>
