<section th:fragment="hero(isHome, cover, title)">
  <div
    th:if="${theme.config.layout.header_widget != 'none'} and ${isHome}"
    class="bg-cover bg-center bg-no-repeat"
    th:styleappend="${theme.config.layout.header_background_type == 'image' ? 'background-image: url(' + theme.config.layout.header_background_image + ');' : 'background: ' + theme.config.layout.header_background + ';'}"
    th:classappend="${theme.config.layout.header_widget == 'site_title' ? 'h-96' : ''}"
  >
    <th:block th:switch="${theme.config.layout.header_widget}">
      <th:block th:case="latest_post" th:with="posts = ${postFinder.list(1,1)}">
        <div class="mx-auto max-w-7xl px-4 py-6 lg:px-6" th:if="${posts.total gt 0}">
          <th:block th:replace="~{modules/featured-post-card :: featured-post-card(post=${posts.items[0]})}" />
        </div>
      </th:block>
      <th:block th:case="latest_post_grid" th:with="posts = ${postFinder.list(1,5)}">
        <div
          class="mx-auto grid max-w-7xl grid-cols-1 gap-3 px-4 py-6 sm:grid-cols-5 lg:px-6"
          th:if="${posts.total gt 0}"
        >
          <div class="col-span-1 sm:col-span-3">
            <th:block
              th:replace="~{modules/post-card :: post-card(post=${posts.items[0]},cover=true,animation=false,border=false,direction='row')}"
            />
          </div>
          <div class="col-span-1 grid grid-cols-1 gap-3 sm:col-span-2 sm:grid-cols-2">
            <th:block th:each="post,postStat : ${posts.items}">
              <th:block th:if="${postStat.index != 0}">
                <th:block
                  th:replace="~{modules/post-card :: post-card(post=${post},cover=false,animation=false,border=false,direction='row')}"
                />
              </th:block>
            </th:block>
          </div>
        </div>
      </th:block>
      <th:block th:case="site_title">
        <div class="mx-auto flex h-full max-w-7xl flex-col items-center justify-center gap-3 px-4 py-6 lg:px-6">
          <span class="text-5xl" th:style="|color:${theme.config.layout.title_color}|" th:text="${site.title}"></span>
          <span
            class="text-sm font-light"
            th:style="|color:${theme.config.layout.title_color}|"
            th:text="${site.subtitle}"
          ></span>
        </div>
      </th:block>
    </th:block>
  </div>
  <th:block th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}">
    <div class="relative">
      <div
        class="before:z-1 relative h-96 bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
        th:style="|background-image: url('${cover}')|"
      ></div>
      <header
        class="pattern-header-text absolute top-1/2 mx-auto flex w-full flex-col items-center justify-center gap-3"
      >
        <h1 class="text-5xl text-white" th:text="${title}"></h1>
      </header>
    </div>
  </th:block>
</section>
