<#include "module/macro.ftl">
<@layout title="标签：${tag.name} | ${options.blog_title!}">
  <main class="mx-auto" id="container">
    <header class="bg-gray-900 table fade-down relative w-full opacity-95 z-10 h-1/2">
      <#if tag.thumbnail?? && tag.thumbnail!=''>
        <div class="cover-bg bottom-0 left-0 right-0 top-0 opacity-30 absolute">
          <img src="${tag.thumbnail!}"
               class="h-full w-full left-0 object-cover absolute top-0 no-zoom"
               alt="${tag.name}">
        </div>
      <#else>
        <div class="placeholder-bg">
        </div>
      </#if>
      <div class="h-96 align-middle table-cell relative w-full index flex justify-center">
        <h2 class="text-white mb-5 mt-4 leading-loose relative w-full text-4xl text-center">
          ${tag.name} <sup>${posts.totalElements}</sup>
        </h2>
      </div>
    </header>
    <div class="mx-auto fade-up pt-4 <#if settings.posts_style!true>px-5 md:px-0 max-w-xl sm:max-w-2xl md:max-w-3xl lg:max-w-5xl <#else> px-5 max-w-4xl</#if>">
      <#if settings.posts_style!true>
        <#include "module/widget/post_cards.ftl">
      <#else>
        <#include "module/widget/post_list.ftl">
      </#if>
        <#-- 分页-->
      <nav class="pagination flex flex-row justify-center my-8" role="navigation" aria-label="pagination">
        <@paginationTag method="tagPosts" page="${posts.number}" total="${posts.totalPages}" display="3" slug="${tag.slug!}">
          <#include "module/widget/pagination.ftl">
        </@paginationTag>
      </nav>
    </div>
  </main>
</@layout>