<div
  th:fragment="post-card(post,cover,animation,border,direction)"
  class="group flex flex-col overflow-hidden rounded-xl bg-white shadow-md ring-black transition-all duration-500 hover:shadow-lg dark:bg-slate-800 dark:ring-slate-700"
  th:classappend="${animation  ? 'hover:-translate-y-1' : ''} + ' ' + ${border ? 'hover:ring-2' : ''} + ' ' + ${direction == 'column' ? '!grid grid-cols-1 sm:grid-cols-5' : ''}"
>
  <div
    th:if="${cover} and ${not #strings.isEmpty(post.spec.cover)}"
    class="aspect-w-16 aspect-h-9"
    th:classappend="${direction == 'column' ? 'col-span-2' : ''}"
  >
    <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
      <img
        th:src="${post.spec.cover}"
        th:alt="${post.spec.title}"
        class="h-full w-full object-cover transition-all duration-500"
        th:classappend="${animation} ? 'group-hover:scale-105'"
      />
    </a>
    <div th:if="${post.spec.pinned}" class="absolute !top-1.5 !left-2" title="置顶">
      <div class="i-bx-arrow-to-top !h-5 !w-5 text-sky-600"></div>
    </div>
  </div>
  <div
    class="relative flex flex-col gap-2 p-4"
    th:with="list_layout=${theme.config.layout.post_list_layout}"
    th:classappend="${direction == 'column' ? 'col-span-3' : ''}"
  >
    <div
      th:if="${not #lists.isEmpty(post.categories)} or ${not #lists.isEmpty(post.tags)}"
      class="flex flex-wrap items-center gap-2"
    >
      <a
        th:if="${#lists.size(post.categories)} gt 0"
        th:href="@{${post.categories[0].status.permalink}}"
        th:title="${post.categories[0].spec.displayName}"
        th:text="${post.categories[0].spec.displayName}"
        class="mr-1 text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-slate-500 dark:hover:text-slate-600"
      >
      </a>
      <a
        th:each="tag : ${post.tags}"
        th:href="@{${tag.status.permalink}}"
        th:title="${tag.spec.displayName}"
        th:text="|#${tag.spec.displayName}|"
        class="cursor-pointer text-sm italic text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
      >
      </a>
    </div>
    <h1
      class="cursor-pointer text-2xl font-medium transition-all line-clamp-2 hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
      th:classappend="|${direction == 'column' ? 'sm:line-clamp-2' : ''} ${list_layout == 'grid_2' ? 'sm:line-clamp-3' : ''} ${list_layout == 'grid_3' ? 'sm:line-clamp-4' : ''}|"
    >
      <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>
    </h1>
    <p
      class="font-sm font-light line-clamp-6 dark:text-slate-200"
      th:text="${post.status.excerpt}"
      th:classappend="${list_layout == 'grid_3' ? ' sm:line-clamp-8' : ''}"
    ></p>
    <div class="mt-4 flex flex-1 items-center justify-start gap-2">
      <a th:href="@{${post.owner.permalink}}" th:title="${post.owner.displayName}">
        <img
          th:src="${post.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
          th:title="${post.owner.displayName}"
          th:alt="${post.owner.displayName}"
          class="h-8 w-8 rounded-full border drop-shadow-sm dark:border-slate-700"
        />
      </a>
      <a
        th:href="@{${post.owner.permalink}}"
        th:title="${post.owner.displayName}"
        class="text-sm font-medium text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
        th:if="${#strings.isEmpty(post.owner.avatar)}"
        th:text="${post.owner.displayName}"
      ></a>
      <span
        class="text-sm tabular-nums text-gray-600 dark:text-slate-300"
        th:text="|发布于 ${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}|"
      >
      </span>
    </div>
  </div>
</div>
