  <!-- What's new on the SPN -->
  <div class="flex items-center mb-4 justify-items-center w-80">
    <h4 class="mr-4">Network Status</h4>
    <span class="flex-grow inline-block border-b border-buttons-light"></span>
  </div>

  <span class="text-secondary" *ngIf="!spnIssues.length">Loading Network Status ...</span>
  <div class="issue-list">
    <ul [@fadeInList]="spnIssues.slice(0, 8).length">
      <li *ngFor="let issue of spnIssues.slice(0, 8); trackBy: trackIssue" (click)="issue.expanded = !issue.expanded"
        class="issue" [class.expanded]="issue.expanded">
        <div class="header">
          <span class="title">{{ issue.title }}</span>
          <span class="meta">{{ issue.closed ? 'closed' : 'opened'}} by <u>{{ issue.user }}</u>
            {{
            issue.createdAt | timeAgo
            }}</span>
        </div>
        <fa-icon [icon]="issue.expanded ? 'chevron-up' : 'chevron-down'"></fa-icon>
        <div class="body" *ngIf="issue.expanded">
          <markdown emoji [data]="issue.body"></markdown>
          <div>
            <a class="underline text-primary" (click)="openIssue(issue)">Open on Github</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
