<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div *ngIf="resources" layoutDirection="column" appLayoutGap="10px">
    <div *ngFor="let resource of resources.resources" class="full-width">
      <p class="fl-detail" i18n>Stack resource: {{resource.resource_name}}</p>
      <p class="fl-detail" i18n>Physical resource id:
        <a *ngIf="resource.resourceLink; else noLink" class="active-link" [routerLink]="[resource.resourceLink]">
          {{resource.physical_resource_id}}
        </a>
        <ng-template #noLink>
          {{resource.physical_resource_id | nullValue }}
        </ng-template>
      </p>
      <p class="fl-detail" i18n>Stack resource type: {{resource.resource_type}}</p>
      <p class="fl-detail" i18n>Date updated: <app-date-displayer [date]="resource.updated_time" withTime></app-date-displayer></p>
      <p class="fl-detail" i18n>Status: {{resource.resource_status}}</p>
      <pre class="full-width status-reason fl-detail" i18n>Status reason: {{resource.resource_status_reason}}</pre>
    </div>
  </div>
</div>
