@if ((workPackage$ | async); as workPackage) {
  @if (detailed) {
    <display-field [resource]="workPackage"
      [displayFieldOptions]="{ writable: false }"
      containerType="single-view"
      fieldName="status" />
  }
  <display-field [resource]="workPackage"
    [displayFieldOptions]="{ writable: false }"
    fieldName="type" />
  <a data-hover-card-trigger-target="trigger"
    target="_top"
    [href]="pathHelper.workPackagePath(workPackage.displayId)"
    [attr.data-work-package-id]="workPackage.id"
    [attr.data-hover-card-url]="workPackageHoverCardUrl">
    {{workPackage.formattedId}}:
  </a>
  <display-field [resource]="workPackage"
    [displayFieldOptions]="{ writable: false }"
    fieldName="subject" />
  @if (detailed && (!!workPackage.startDate || !!workPackage.dueDate || !!workPackage.date)) {
    (@if (!!workPackage.date) {
    <display-field [resource]="workPackage"
      [displayFieldOptions]="{ writable: false }"
      fieldName="date"
      containerType="single-view" />
  }
  @if (!!workPackage.startDate) {
    <display-field [resource]="workPackage"
      [displayFieldOptions]="{ writable: false }"
      [displayClass]="combinedDateDisplayField"
      fieldName="startDate"
      containerType="single-view" />
  }
  @if (!workPackage.startDate && !!workPackage.dueDate) {
    <display-field [resource]="workPackage"
      [displayFieldOptions]="{ writable: false }"
      [displayClass]="combinedDateDisplayField"
      fieldName="dueDate"
      containerType="single-view" />
    })
  }
} @else if (!error) {
  <op-content-loader
    class="op-wp-quickinfo-macro--loading-indicator"
    viewBox="0 0 120 16">
    <svg:rect x="0" y="0" width="100%" height="100%" rx="2" ry="2" />
  </op-content-loader>
}
@if (error) {
  <span>
    <i class="icon icon-error"></i>
    <em [textContent]="error"></em>
  </span>
}