<div class="clr-row">
  <div class="clr-col-12">
    <div class="card">
      <div class="card-header">
        {{ isEditMode ? 'Edit Note' : 'Create New Note' }}
      </div>
      <div class="card-block">
        <form clrForm (ngSubmit)="saveNote()">
          <clr-input-container>
            <label>Title</label>
            <input clrInput type="text" [(ngModel)]="note.title" name="title" required />
          </clr-input-container>

          <clr-textarea-container>
            <label>Content</label>
            <textarea clrTextarea [(ngModel)]="note.content" name="content" required></textarea>
          </clr-textarea-container>

          <button class="btn btn-primary" type="submit">Save</button>
          <button class="btn btn-link" type="button" routerLink="/notes">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</div>