<div class="clr-row clr-justify-content-center">
  <div class="clr-col-lg-8 clr-col-md-10 clr-col-12">
    <div class="card" *ngIf="note">
      <div class="card-header">
        {{ note.title }}
        <div class="card-actions">
          <button class="btn btn-sm btn-link" (click)="editNote()">Edit</button>
          <button class="btn btn-sm btn-link" (click)="deleteNote()">Delete</button>
        </div>
      </div>
      <div class="card-block">
        <p>{{ note.content }}</p>
      </div>
      <div class="card-footer">
        <div class="clr-row">
          <div class="clr-col-6">Created: {{ note.createdAt | date:'short' }}</div>
          <div class="clr-col-6 clr-text-right">Updated: {{ note.updatedAt | date:'short' }}</div>
        </div>
        <button class="btn btn-link" (click)="goBack()">Back to Notes</button>
      </div>
    </div>

    <div class="card" *ngIf="!note">
      <div class="card-header">Note Not Found</div>
      <div class="card-block">
        <p>The requested note could not be found.</p>
      </div>
      <div class="card-footer">
        <button class="btn btn-link" (click)="goBack()">Back to Notes</button>
      </div>
    </div>
  </div>
</div>