<div class="clr-row clr-justify-content-center">
  <div class="clr-col-lg-8 clr-col-md-10 clr-col-12">
    <div class="card">
      <div class="card-header">
        Notes List
        <button class="btn btn-sm btn-primary-outline" (click)="createNewNote()">
          <clr-icon shape="plus"></clr-icon> New Note
        </button>
      </div>
      <div class="card-block">
        <clr-datagrid>
          <clr-dg-column>Title</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.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-cell>
              <div class="btn-group-sm">
                <button class="btn btn-link" (click)="viewNote(note.id)">View</button>
                <button class="btn btn-link" (click)="editNote(note.id)">Edit</button>
                <button class="btn btn-link" (click)="deleteNote(note.id)">Delete</button>
              </div>
            </clr-dg-cell>
          </clr-dg-row>

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