<!doctype html>
<th:block
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{components/base-layout/template :: html(
    title = |${linksTitle ?: #messages.msg('page.links.page-title')} - ${site.title}|,
    head = ~{:: head},
    content = ~{:: body},
    header = ~{components/header/template :: body},
    navbar = ~{}
  )}"
>
  <head th:remove="tag">
    <link
      rel="canonical"
      th:if="${theme.config?.links_page_styles?.is_enable_canonical_link}"
      th:href="${siteUrl} + @{/links}"
    />
    <th:block th:insert="~{components/header/template :: head}"></th:block>
    <script type="module" crossorigin src="/themes/howiehz-higan/assets/1.65.0Bk5FHpu.js" integrity="sha384-cg6x7Pb77Zqih642wbHELBIb8vuQ0VeuH0Zb6tWgHC6J1oxIpFMgVUPeGS0CiGHV"></script>
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Nu1u8yY.css" integrity="sha384-h6WHiBEsz55L9LeaTSvyYRiiYVLTekMvNJhG+VjwyKti556zI6k8M+nZTayAbuwQ">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0BXbPKf6.css" integrity="sha384-EC22XUc2q92qh5k5fOxYAcygSvrucN0bAAn+eOAs1LaK32bTOSIf0sBy6cJWYUUF">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Bicc1e3.css" integrity="sha384-JZPOQ+7mdAeT6L3rX1fi/Xvhtbr+lZd0Wy165luHFqtcM5hQXidOHfpB5R/zc686">
  </head>
  <body th:remove="tag">
    <article id="links" class="post" itemscope itemtype="http://schema.org/BlogPosting">
      <div class="content" th:unless="${theme.config?.links_page_styles?.is_head_first_style}">
        <th:block th:each="group : ${groups}" th:unless="${#lists.isEmpty(group.links)}">
          <h3 th:if="${#lists.size(groups) > 1}" th:text="${group.spec.displayName}"></h3>
          <ul>
            <li th:each="link : ${group.links}">
              <a class="fir-image-figure" rel="noopener" target="_blank" th:href="@{${link.spec.url}}">
                <figure class="fir-imageover">
                  <img
                    loading="lazy"
                    class="fir-author-image fir-clickcircle"
                    th:src="${link.spec.logo}"
                    th:alt="${link.spec.displayName}"
                    th:aria-label="#{page.links.link-logo.aria-label}"
                  />
                  <figcaption>
                    <div class="fig-author-figure-title" th:text="${link.spec.displayName}"></div>
                    <div class="fig-author-figure-description" th:utext="${link.spec.description}"></div>
                  </figcaption>
                </figure>
              </a>
            </li>
          </ul>
        </th:block>
      </div>
      <div class="content head-first-style" th:if="${theme.config?.links_page_styles?.is_head_first_style}">
        <th:block th:each="group : ${groups}" th:unless="${#lists.isEmpty(group.links)}">
          <h3 th:if="${#lists.size(groups) > 1}" th:text="${group.spec.displayName}"></h3>
          <ul class="links-grid">
            <li
              th:each="link : ${group.links}"
              th:with="max_lines = ${theme.config?.links_page_styles?.link_description_max_lines}"
            >
              <a class="link-card" rel="noopener" target="_blank" th:href="@{${link.spec.url}}">
                <img
                  loading="lazy"
                  class="link-avatar"
                  th:src="${link.spec.logo}"
                  th:alt="${link.spec.displayName}"
                  th:aria-label="#{page.links.link-logo.aria-label}"
                />
                <div class="link-info">
                  <div class="link-title" th:text="${link.spec.displayName}"></div>
                  <div
                    class="link-description"
                    th:utext="${link.spec.description}"
                    th:classappend="|${max_lines == '1' ? 'v-line-clamp-1' : ''} ${max_lines == '2' ? 'v-line-clamp-2' : ''} ${max_lines == '3' ? 'v-line-clamp-3' : ''} ${max_lines == '4' ? 'v-line-clamp-4' : ''} ${max_lines == '5' ? 'v-line-clamp-5' : ''}|"
                  ></div>
                </div>
              </a>
            </li>
          </ul>
        </th:block>
      </div>
    </article>
  </body>
</th:block>
