@if (row) {
  <div class="title-with-icon">
    @if (row.resource.icon | mimeIcon; as icon) {
      <pa-icon [name]="icon"></pa-icon>
    }
    <div class="title-and-description">
      <div class="title-row">
        <div
          class="body-s"
          data-cy="resource-title">
          <a
            [routerLink]="'../' + row.resource.id + '/edit/preview'"
            (click)="onClickLink($event)">
            {{ row.resource.title }}
          </a>
        </div>
        <!-- TODO: relies on `data.conversations` from ResourceProperties.VALUES being always
        fetched in the resource list as a temporary workaround (see resource-list.model.ts).
        Replace with a proper backend-exposed memory-resource flag once available. -->
        @if (isMemoryResource(row.resource)) {
          <nsi-badge kind="neutral">{{ 'resource.tag.memory' | translate }}</nsi-badge>
        }
      </div>
      @if (row.description) {
        <small
          class="body-xs"
          data-cy="resource-description">
          {{ row.description }}
        </small>
      }
    </div>
    <div class="title-status">
      @switch (row.resource.metadata?.status) {
        @case ('PENDING') {
          <pa-icon name="clock-dash"></pa-icon>
        }
        @case ('ERROR') {
          <pa-icon
            class="error"
            name="warning"></pa-icon>
        }
        @case ('DELETED') {
          <pa-icon name="circle-dash"></pa-icon>
        }
      }
    </div>
  </div>
}