<!-- <app-post-editor /> -->
<div class="flex items-center justify-between">
  <h2 class="text-2xl">Posts Overview</h2>
  <a
    routerLink="/post/new"
    class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
  >
    New
  </a>
</div>

<section class="grid grid-cols-1 gap-5 m-5">
  <article
    *ngFor="let post of posts()"
    class="p-5 grid grid-cols-5 grid-rows-3 items-start rounded-s bg-white drop-shadow-md hover:drop-shadow-lg"
  >
    <h3 class="text-xl col-span-4">{{ post.title }}</h3>
    <p class="col-start-1 col-span-4 row-start-2 row-span-2">
      <strong>TL;DR; </strong>{{ post.tldr }}
    </p>
    <a
      [routerLink]="`/post/${post.id}/edit`"
      class="col-start-5 row-start-1 bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors text-center"
    >
      Edit
    </a>
    <button
      (click)="delete(post.id)"
      class="col-start-5 row-start-3 bg-orange-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-orange-600 transition-colors"
    >
      Delete
    </button>
  </article>
</section>
