<div class="clr-row">
  <div class="clr-col-12">
    <h2 class="clr-h2">My Notes</h2>
    <button class="btn btn-primary" (click)="createNewNote()">
      <clr-icon shape="plus"></clr-icon> New Note
    </button>

    <div *ngIf="loading" class="spinner spinner-inline">
      Loading notes...
    </div>

    <div *ngIf="error" class="alert alert-danger" role="alert">
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="exclamation-triangle"></clr-icon>
          </div>
          <span class="alert-text">{{ error }}</span>
        </div>
      </div>
    </div>

    <clr-datagrid *ngIf="!loading && !error && notes.length > 0">
      <clr-dg-column [clrDgField]="'title'">Title</clr-dg-column>
      <clr-dg-column [clrDgField]="'createdAt'">Created At</clr-dg-column>
      <clr-dg-column [clrDgField]="'updatedAt'">Updated At</clr-dg-column>

      <clr-dg-row *clrDgItems="let note of notes" [clrDgExpanded]="false">
        <clr-dg-cell>{{ note.title }}</clr-dg-cell>
        <clr-dg-cell>{{ note.createdAt | date:'short' }}</clr-dg-cell>
        <clr-dg-cell>{{ note.updatedAt | date:'short' }}</clr-dg-cell>
        <clr-dg-action-overflow>
          <button class="action-item" (click)="viewNote(note.id)">View</button>
          <button class="action-item" (click)="editNote(note.id)">Edit</button>
          <button class="action-item" (click)="deleteNote(note.id)">Delete</button>
        </clr-dg-action-overflow>
        <clr-dg-row-detail *clrIfExpanded>
          <div class="clr-row">
            <div class="clr-col-12">
              <h4>Content:</h4>
              <p>{{ note.content }}</p>
            </div>
          </div>
        </clr-dg-row-detail>
      </clr-dg-row>

      <clr-dg-footer>{{notes.length}} notes</clr-dg-footer>
    </clr-datagrid>

    <div *ngIf="!loading && !error && notes.length === 0" class="card card-block">
      <div class="card-text">No notes found. Click "New Note" to create one.</div>
    </div>
  </div>
</div>