<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
  <div class="grid grid-cols-3">
    <label>Title:</label>
    <input
      type="text"
      [ngModel]="data().title"
      (ngModelChange)="title = $event"
      class="p-1 border-2 rounded-md col-span-2"
    />
  </div>
  <p class="text-3xl">{{ data().title }}</p>
  <div class="grid grid-cols-3">
    <label>TL;DR;</label>
    <input
      type="text"
      [ngModel]="data().tldr"
      (ngModelChange)="tldr = $event"
      class="p-1 border-2 rounded-md col-span-2"
    />
  </div>
  <p class="mb-5 italic text-sm">TL;DR; {{ data().tldr }}</p>

  <textarea
    [ngModel]="data().content"
    (ngModelChange)="content = $event"
    class="border-2 rounded-md p-1"
    rows="20"
  ></textarea>
  <app-markdown [markdown]="data().content" />
</div>
