<div class="clr-row">
  <div class="clr-col-12">
    <div class="card">
      <div class="card-header">
        Notes List
        <button class="btn btn-sm btn-primary-outline" routerLink="/notes/new">Add New Note</button>
      </div>
      <div class="card-block">
        <clr-datagrid>
          <clr-dg-column>ID</clr-dg-column>
          <clr-dg-column>Title</clr-dg-column>
          <clr-dg-column>Content</clr-dg-column>
          <clr-dg-column>Created At</clr-dg-column>
          <clr-dg-column>Updated At</clr-dg-column>
          <clr-dg-column>Actions</clr-dg-column>

          <clr-dg-row *clrDgItems="let note of notes">
            <clr-dg-cell>{{ note.id }}</clr-dg-cell>
            <clr-dg-cell>{{ note.title }}</clr-dg-cell>
            <clr-dg-cell>{{ note.content }}</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-cell>
              <button class="btn btn-sm btn-link" [routerLink]="['/notes/edit', note.id]">Edit</button>
              <button class="btn btn-sm btn-link" (click)="deleteNote(note.id)">Delete</button>
            </clr-dg-cell>
          </clr-dg-row>

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