<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!securityGroups" overlayParent></app-fl-backdrop>
  <table class="full-width fl-table" *ngIf="securityGroups">
    <tbody *ngFor="let secGroup of securityGroups">
      <tr class="fl-background-eee">
        <td appFlex="100" ltMdFlex="90">
          <a [routerLink]="[config.getPanelUrl('openstack/security-groups'), secGroup.id]" class="group-link">
            <span class="fl-block sec-group fl-ellipsis-text" i18n>
              Group: {{secGroup.name }}
              <span title="{{ secGroup.description }}" class="fl-sub-text">
                - {{ secGroup.description }}
              </span>
            </span>
          </a>
        </td>
        <td class="fl-flex-right-align no-overflow-hidden">
          <button [attr.fl-tooltip]="dissociateSecurityGroupTxt"
                  [disabled]="!permissions['instances.dissociate_security_group']"
                  fl-tooltip-direction="left"
                  mat-icon-button (click)="dissociateGroup(secGroup)">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </tr>
      <tr *ngFor="let rule of secGroup.security_group_rules">
        <td class="rule-td">
          <span class="fl-ellipsis-text">
            {{ rule.display }}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div layoutAlign="end">
  <button [color]="'primary'"
          [disabled]="!permissions['instances.associate_security_group']"
          (click)="openAssociateSecurityGroupDialog()"
          mat-button i18n>Associate</button>
</div>

