<footer th:if="${theme.config.footer.style == 'style_1'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="mx-auto max-w-7xl px-4 sm:flex sm:items-center sm:justify-between lg:px-6">
    <a href="/" class="mb-4 flex items-center justify-center sm:mb-0 sm:justify-start">
      <img
        th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
        th:src="${theme.config.footer.logo ?: site.logo}"
        class="mr-3 size-8"
        th:alt="${site.title}"
      />
      <span
        class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
        th:text="${theme.config.footer.title ?: site.title}"
      >
      </span>
    </a>
    <th:block
      th:unless="${#strings.isEmpty(theme.config.footer.right_menu)} and ${#strings.isEmpty(theme.config.footer.menu)}"
    >
      <ul
        th:with="menu = ${menuFinder.getByName(theme.config.footer.right_menu ?: theme.config.footer.menu)}"
        class="mb-6 flex flex-wrap items-center justify-center space-x-4 text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start md:space-x-6"
      >
        <li th:each="menuItem : ${menu.menuItems}">
          <a
            th:href="@{${menuItem.status.href}}"
            class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
            th:text="${menuItem.status.displayName}"
            th:target="${menuItem.spec.target?.value}"
          ></a>
        </li>
      </ul>
    </th:block>

    <th:block th:replace="~{modules/footer-social}" />
  </div>
  <hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <div class="space-y-1">
    <span
      class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
      th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}"
    >
      <a
        href="https://beian.miit.gov.cn/"
        class="hover:underline"
        target="_blank"
        th:href="${theme.config.beian.icp_link}"
        th:text="${theme.config.beian.icp_text}"
      ></a>
    </span>
    <div
      th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
      class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
    >
      <p class="flex items-center justify-center gap-1">
        <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
        <a
          href="https://beian.mps.gov.cn/#/query/webSearch"
          class="hover:underline"
          target="_blank"
          th:href="${theme.config.beian.gongan_link}"
          th:text="${theme.config.beian.gongan_text}"
        ></a>
      </p>
    </div>
    <span class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6">
      ©
      <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
      <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
      <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
    </span>
    <span class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6">
      <halo:footer />
    </span>
  </div>
</footer>

<footer th:if="${theme.config.footer.style == 'style_2'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="mx-auto max-w-7xl px-4 md:flex md:justify-between md:gap-10 lg:px-6">
    <div class="mb-6 max-w-full md:mb-0 md:max-w-md">
      <a href="/" class="mb-6 flex items-center">
        <img
          th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
          th:src="${theme.config.footer.logo ?: site.logo}"
          class="mr-3 h-8"
          th:alt="${site.title}"
        />
        <span
          class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
          th:text="${theme.config.footer.title ?: site.title}"
        ></span>
      </a>
      <span
        th:if="${not #strings.isEmpty(theme.config.footer.slogan)}"
        class="text-sm font-light text-gray-600 dark:text-slate-200"
        th:text="${theme.config.footer.slogan}"
      >
      </span>
    </div>
    <div
      th:unless="${#lists.isEmpty(theme.config.footer.menu_names)}"
      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
    >
      <th:block th:each="name : ${theme.config.footer.menu_names}">
        <div th:with="menu = ${menuFinder.getByName(name)}">
          <h2
            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
            th:text="${menu.spec.displayName}"
          ></h2>
          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
            <li th:each="menuItem : ${menuItems}" class="mb-4">
              <a
                th:href="@{${menuItem.status.href}}"
                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
                th:text="${menuItem.status.displayName}"
                th:target="${menuItem.spec.target?.value}"
              ></a>
            </li>
          </ul>
        </div>
      </th:block>
    </div>

    <!--/*Compatibility solution, will be removed in the future*/-->
    <div
      th:if="${#lists.isEmpty(theme.config.footer.menu_names)} and ${not #lists.isEmpty(theme.config.footer.menus)}"
      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
    >
      <th:block th:each="menuName : ${theme.config.footer.menus}">
        <div th:with="menu = ${menuFinder.getByName(menuName.name)}">
          <h2
            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
            th:text="${menu.spec.displayName}"
          ></h2>
          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
            <li th:each="menuItem : ${menuItems}" class="mb-4">
              <a
                th:href="@{${menuItem.status.href}}"
                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
                th:text="${menuItem.status.displayName}"
                th:target="${menuItem.spec.target?.value}"
              ></a>
            </li>
          </ul>
        </div>
      </th:block>
    </div>
  </div>
  <hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <div class="mx-auto flex max-w-7xl flex-col px-4 sm:flex-row sm:items-center sm:justify-between lg:px-6">
    <div class="flex flex-col space-y-1 text-center sm:text-left">
      <span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
        ©
        <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
        <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
        <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
      </span>

      <div class="flex flex-col gap-1 sm:flex-row">
        <span
          class="block text-center text-sm text-gray-500 sm:text-left"
          th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}"
        >
          <a
            href="https://beian.miit.gov.cn/"
            class="hover:underline"
            target="_blank"
            th:href="${theme.config.beian.icp_link}"
            th:text="${theme.config.beian.icp_text}"
          ></a>
        </span>
        <div
          th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
          class="inline-flex items-center justify-center gap-1 text-sm text-gray-500 sm:justify-start"
        >
          <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
          <a
            href="https://beian.mps.gov.cn/#/query/webSearch"
            class="hover:underline"
            target="_blank"
            th:href="${theme.config.beian.gongan_link}"
            th:text="${theme.config.beian.gongan_text}"
          ></a>
        </div>
      </div>

      <p class="text-sm text-gray-500 dark:text-slate-300">
        <halo:footer />
      </p>
    </div>

    <th:block th:replace="~{modules/footer-social}" />
  </div>
</footer>
