---
import Layout from "../layouts/Layout.astro";
---

<Layout wide>
  <Fragment slot="head">
    <title th:text="|${theme.config?.links?.links_page_title ?: '友情链接'} - ${site.title}|"></title>
  </Fragment>

  <section
    class="wi-links"
    th:if="${pluginFinder.available('PluginLinks')}"
    th:attr="data-style=${theme.config?.links?.links_style ?: 'cards'}"
  >
    <div class="wi-container">
      <div class="wi-links__header">
        <h1
          class="wi-links__title"
          th:text="${theme.config?.links?.links_page_title ?: '友情链接'}"
        >
          友情链接
        </h1>
        <p class="wi-links__subtitle">山水一程，三生有幸</p>
        <span class="wi-page-accent"></span>
      </div>

      <th:block th:each="group : ${groups}">
        <h2
          class="wi-links__group"
          th:if="${group.spec.displayName != null and !#strings.isEmpty(group.spec.displayName)}"
          th:text="${group.spec.displayName}"
        ></h2>
        <div class="wi-links__grid">
          <a
            th:each="link : ${group.links}"
            th:href="${link.spec.url}"
            th:title="${link.spec.displayName}"
            target="_blank"
            rel="noopener noreferrer"
            class="wi-links__card"
          >
            <div class="wi-links__card-glow"></div>
            <div class="wi-links__card-inner">
              <img
                th:if="${link.spec.logo}"
                th:src="${link.spec.logo}"
                th:alt="${link.spec.displayName}"
                class="wi-links__avatar"
              />
              <div
                th:unless="${link.spec.logo}"
                class="wi-links__avatar wi-links__avatar--placeholder"
              >
                <span
                  th:text="${#strings.substring(link.spec.displayName, 0, 1)}"
                ></span>
              </div>
              <div class="wi-links__info">
                <span
                  class="wi-links__name"
                  th:text="${link.spec.displayName}"
                ></span>
                <span
                  class="wi-links__desc"
                  th:if="${link.spec.description}"
                  th:text="${link.spec.description}"
                ></span>
              </div>
              <svg class="wi-links__arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
            </div>
          </a>
        </div>
      </th:block>
    </div>
  </section>
</Layout>

<style>
  .wi-links {
    padding-block: 1rem;
  }

  .wi-links__header {
    text-align: center;
    margin-bottom: var(--space-3xl);
  }

  .wi-links__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-xs);
  }

  .wi-links__subtitle {
    font-size: var(--text-sm);
    color: var(--ink-3);
    letter-spacing: var(--tracking-wide);
    margin-block-end: 0;
  }

  .wi-page-accent {
    display: block;
    width: 48px;
    height: 3px;
    margin: var(--space-md) auto 0;
    border-radius: 9999px;
    background: var(--accent);
  }

  .wi-links__group {
    font-size: var(--text-lg);
    color: var(--ink-2);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
  }

  .wi-links__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .wi-links[data-style="list"] .wi-links__grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .wi-links[data-style="list"] .wi-links__card-inner {
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
  }

  .wi-links[data-style="grid"] .wi-links__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
  }

  .wi-links[data-style="grid"] .wi-links__card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
  }

  .wi-links[data-style="grid"] .wi-links__arrow {
    display: none;
  }

  .wi-links__card {
    position: relative;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }

  .wi-links__card-glow {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 8%, transparent) 0%,
      transparent 60%
    );
    transition: opacity var(--duration-normal) var(--ease-out-expo);
    pointer-events: none;
  }

  .wi-links__card:hover .wi-links__card-glow {
    opacity: 1;
  }

  .wi-links__card-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      border-color var(--duration-normal) var(--ease-out-expo);
  }

  .wi-links__card:hover .wi-links__card-inner {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  }

  .wi-links__avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }

  .wi-links__card:hover .wi-links__avatar {
    transform: scale(1.08);
  }

  .wi-links__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-bg);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 700;
    box-shadow: none;
    border-radius: 12px;
  }

  .wi-links__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .wi-links__name {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out-quart);
  }

  .wi-links__card:hover .wi-links__name {
    color: var(--accent);
  }

  .wi-links__desc {
    font-size: var(--text-sm);
    color: var(--ink-3);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .wi-links__arrow {
    flex-shrink: 0;
    color: var(--ink-3);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition:
      opacity var(--duration-normal) var(--ease-out-expo),
      transform var(--duration-normal) var(--ease-out-expo),
      color var(--duration-fast) var(--ease-out-quart);
  }

  .wi-links__card:hover .wi-links__arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--accent);
  }

  @media (max-width: 640px) {
    .wi-links__grid {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }

    .wi-links__card-inner {
      padding: var(--space-md);
    }

    .wi-links__avatar {
      width: 42px;
      height: 42px;
    }
  }
</style>
