<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, pageType = 'links', terminalUserName = 'admin', content = ~{::content})}"
>
  <th:block th:fragment="content">
    <section class="devcm-editor-window">
      <div class="devcm-editor-tabs">
        <div class="devcm-editor-tab devcm-editor-tab--active">
          <span>links.md</span>
          <a
            class="devcm-editor-tab__close"
            href="/"
            th:aria-label="#{devcm.action.closeLinksTab}"
            th:title="#{devcm.action.closeLinksTab}"
            >×</a
          >
        </div>
      </div>
      <div class="devcm-editor-body">
        <div class="devcm-link-group" th:each="group : ${groups}">
          <h2
            class="devcm-page-title"
            th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName : #messages.msg('devcm.links.defaultGroup')}"
          >
            Links
          </h2>
          <div class="devcm-link-grid">
            <a class="devcm-link-card" th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank">
              <img
                th:if="${not #strings.isEmpty(link.spec.logo)}"
                th:src="${link.spec.logo}"
                th:alt="${link.spec.displayName}"
              />
              <span class="devcm-link-card__body">
                <strong th:text="${link.spec.displayName}">Link</strong>
                <small th:text="${link.spec.url}">https://example.com</small>
                <span th:text="${link.spec.description}">description</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  </th:block>
</html>
