{% extends 'base.html' %}
{% load i18n %}

{% block extra_css %}
<style>
  /* ============================================================
     Apple-inspired design system — Home page
     Light & airy: #f5f5f7 canvas, SF typography, frosted glass,
     soft shadows, generous whitespace, physics-like easing.
     ============================================================ */
  :root {
    --apple-bg: #f5f5f7;
    --apple-text: #1d1d1f;
    --apple-gray: #6e6e73;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-red: #ff3b30;
    --apple-separator: rgba(0, 0, 0, 0.06);
    --apple-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --apple-radius-lg: 28px;
    --apple-radius-md: 22px;
    --apple-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.10);
  }

  body {
    background-color: var(--apple-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--apple-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .apple-wrap { max-width: 72rem; margin: 0 auto; }

  /* ---------- Entrance & scroll-reveal animations ---------- */
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-anim { animation: hero-rise 1s var(--apple-ease) both; }

  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--apple-ease), transform 0.85s var(--apple-ease);
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .hero-anim, .reveal {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .app-tile, .post-card, .image-tile-btn img { transition: none !important; }
  }

  /* ---------- Hero ---------- */
  .apple-hero {
    position: relative;
    text-align: center;
    padding: clamp(2.75rem, 8vh, 5.5rem) 1rem clamp(2.5rem, 6vh, 4rem);
  }
  .hero-glow {
    position: absolute;
    inset: -12% -6% auto;
    height: 460px;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(38% 46% at 26% 42%, rgba(0, 144, 255, 0.15), transparent 70%),
      radial-gradient(34% 42% at 70% 30%, rgba(191, 90, 242, 0.13), transparent 70%),
      radial-gradient(30% 40% at 52% 72%, rgba(255, 94, 98, 0.10), transparent 70%);
    filter: blur(8px);
  }
  .apple-hero > *:not(.hero-glow) { position: relative; z-index: 1; }

  .hero-title {
    font-size: clamp(3.1rem, 9vw, 5.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
    background: linear-gradient(97deg, #0090ff 0%, #6a5cff 38%, #c850c0 70%, #ff5e62 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-subtitle {
    margin: 1.1rem auto 0;
    max-width: 37rem;
    font-size: clamp(1.05rem, 2.3vw, 1.375rem);
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--apple-gray);
  }

  /* ---------- Hero search (frosted glass pill) ---------- */
  .hero-search { position: relative; max-width: 40rem; margin: 2.6rem auto 0; text-align: left; }
  .hero-search .search-icon {
    position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; color: var(--apple-gray); pointer-events: none;
  }
  .hero-search input {
    width: 100%; height: 3.8rem; padding: 0 1.6rem 0 3.5rem;
    font-size: 1.08rem; color: var(--apple-text);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 980px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.35s var(--apple-ease), border-color 0.35s var(--apple-ease);
  }
  .hero-search input::placeholder { color: #86868b; }
  .hero-search input:focus {
    outline: none;
    border-color: rgba(0, 113, 227, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16), 0 16px 48px rgba(0, 0, 0, 0.11);
  }

  .search-results {
    position: absolute; top: calc(100% + 0.65rem); left: 0; right: 0; z-index: 60;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--apple-radius-md);
    box-shadow: 0 26px 68px rgba(0, 0, 0, 0.17);
    max-height: 22rem; overflow-y: auto; padding: 0.4rem;
  }
  .search-result-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1.05rem; border-radius: 16px; cursor: pointer;
  }
  .search-result-item:hover, .search-result-item.active { background: rgba(0, 0, 0, 0.05); }
  .search-result-item a {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: 1.02rem; color: var(--apple-text); text-decoration: none;
  }
  .search-result-item mark {
    background: rgba(0, 113, 227, 0.13); color: var(--apple-blue);
    border-radius: 4px; padding: 0 1px;
  }
  .search-result-item .chev { width: 0.85rem; height: 0.85rem; color: #c7c7cc; flex: none; }
  .search-empty { padding: 1.1rem; color: var(--apple-gray); text-align: center; font-size: 0.95rem; }

  /* ---------- Hero stats ---------- */
  .hero-stats { display: flex; align-items: center; justify-content: center; gap: 1.8rem; margin-top: 2.5rem; }
  .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
  .hero-stat-number { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .hero-stat-label { font-size: 0.76rem; color: var(--apple-gray); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; }
  .hero-stat-divider { width: 1px; height: 2.3rem; background: rgba(0, 0, 0, 0.10); }

  /* ---------- Sections, cards, buttons ---------- */
  .home-section { margin-top: clamp(2.5rem, 6vh, 4.5rem); }
  .apple-card {
    background: #fff;
    border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--apple-shadow-card);
  }
  .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; padding: 0 0.35rem; }
  .section-title { font-size: clamp(1.45rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.022em; }

  .apple-link {
    color: var(--apple-blue); font-weight: 500; font-size: 0.98rem;
    display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none;
  }
  .apple-link:hover { text-decoration: underline; }
  .apple-link svg { width: 0.8em; height: 0.8em; transition: transform 0.3s var(--apple-ease); }
  .apple-link:hover svg { transform: translateX(2px); }

  .apple-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 44px; padding: 0.6rem 1.4rem; border-radius: 980px;
    font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; text-decoration: none;
    transition: background 0.3s var(--apple-ease), transform 0.3s var(--apple-ease), box-shadow 0.3s var(--apple-ease);
  }
  .apple-btn:active { transform: scale(0.97); }
  .apple-btn-primary { background: var(--apple-blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.28); }
  .apple-btn-primary:hover { background: var(--apple-blue-hover); color: #fff; }
  .apple-btn-danger { background: transparent; color: var(--apple-red); border: 1px solid rgba(255, 59, 48, 0.4); }
  .apple-btn-danger:hover { background: rgba(255, 59, 48, 0.08); }

  /* ---------- Link library (table) ---------- */
  .library-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.7rem 1.8rem 1.25rem;
  }
  .library-title-group { display: flex; flex-direction: column; gap: 0.15rem; }
  .library-count { font-size: 0.88rem; color: var(--apple-gray); }
  .library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .library-filter { position: relative; }
  .library-filter svg {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; color: var(--apple-gray); pointer-events: none;
  }
  .library-filter input {
    height: 44px; width: min(16rem, 64vw); padding: 0 1rem 0 2.5rem;
    border-radius: 980px; border: 1px solid rgba(0, 0, 0, 0.10);
    background: var(--apple-bg); font-size: 0.95rem; color: var(--apple-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .library-filter input::placeholder { color: #86868b; }
  .library-filter input:focus {
    outline: none; background: #fff;
    border-color: rgba(0, 113, 227, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
  }

  .table-scroll { overflow-x: auto; }
  .apple-table { width: 100%; min-width: 620px; border-collapse: collapse; }
  .apple-table thead th {
    text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--apple-gray);
    padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--apple-separator);
    background: rgba(245, 245, 247, 0.6);
  }
  .apple-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }
  .apple-table thead th a:hover { color: var(--apple-text); }
  .apple-table tbody td {
    padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--apple-separator);
    font-size: 0.95rem; vertical-align: middle;
  }
  .apple-table tbody tr { transition: background 0.25s ease; }
  .apple-table tbody tr:hover { background: rgba(0, 0, 0, 0.025); }
  .apple-table tbody tr:last-child td { border-bottom: none; }

  .alias-link { color: var(--apple-blue); font-weight: 600; text-decoration: none; }
  .alias-link:hover { text-decoration: underline; }
  .url-cell { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--apple-gray); }
  .url-cell a { color: inherit; text-decoration: none; }
  .url-cell a:hover { color: var(--apple-blue); }
  .clicks-cell { font-variant-numeric: tabular-nums; font-weight: 500; }

  .badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.72rem; border-radius: 980px;
    font-size: 0.78rem; font-weight: 600;
  }
  .badge-template { background: rgba(191, 90, 242, 0.12); color: #8944ab; }
  .badge-link { background: rgba(0, 113, 227, 0.10); color: var(--apple-blue); }
  .badge-custom { background: rgba(48, 209, 88, 0.15); color: #1e7b34; }

  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: #8e8e93;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .icon-btn:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-1px); }
  .icon-btn.blue:hover { color: var(--apple-blue); }
  .icon-btn.green:hover { color: #1e7b34; }
  .icon-btn.red:hover { color: var(--apple-red); }
  .icon-btn svg { width: 1.2rem; height: 1.2rem; }

  .library-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.1rem 1.8rem 1.5rem;
  }
  .selection-hint { font-size: 0.85rem; color: var(--apple-gray); margin: 0; }

  /* ---------- Posts ---------- */
  .posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
  .post-card {
    background: #fff; border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--apple-shadow-card);
    transition: transform 0.45s var(--apple-ease), box-shadow 0.45s var(--apple-ease);
  }
  .post-card:hover { transform: translateY(-5px); box-shadow: var(--apple-shadow-lift); }
  .post-card-link { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; padding: 1.5rem 1.5rem 1.4rem; color: inherit; text-decoration: none; }
  .post-card-date { font-size: 0.78rem; color: var(--apple-gray); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
  .post-card-title {
    font-size: 1.13rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .post-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.4rem; }
  .tag-pill { font-size: 0.75rem; font-weight: 500; color: var(--apple-gray); background: rgba(0, 0, 0, 0.05); padding: 0.22rem 0.65rem; border-radius: 980px; }

  .empty-state { padding: 2.75rem 1.5rem; text-align: center; color: var(--apple-gray); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .empty-state svg { width: 2.6rem; height: 2.6rem; color: #c7c7cc; }

  /* ---------- Bento tiles (mini apps) ---------- */
  .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
  .app-tile {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 200px; padding: 1.7rem; border-radius: var(--apple-radius-lg);
    color: #fff; text-decoration: none; box-shadow: var(--apple-shadow-card);
    transition: transform 0.45s var(--apple-ease), box-shadow 0.45s var(--apple-ease);
  }
  .app-tile:hover { transform: translateY(-5px); box-shadow: var(--apple-shadow-lift); color: #fff; }
  .app-tile::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(120% 120% at 85% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 46%);
  }
  .tile-arrow {
    position: absolute; top: 1.15rem; right: 1.15rem; width: 34px; height: 34px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.22);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s ease, transform 0.35s var(--apple-ease);
  }
  .tile-arrow svg { width: 1rem; height: 1rem; }
  .app-tile:hover .tile-arrow { background: rgba(255, 255, 255, 0.36); transform: translate(2px, -2px); }
  .app-tile-name { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; }
  .app-tile-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.86); margin-top: 0.15rem; }
  .gradient-1 { background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%); }
  .gradient-2 { background: linear-gradient(135deg, #ff9f0a 0%, #ff375f 100%); }
  .gradient-3 { background: linear-gradient(135deg, #30d158 0%, #0a84ff 100%); }
  .gradient-4 { background: linear-gradient(135deg, #bf5af2 0%, #ff375f 100%); }

  /* ---------- Image tiles ---------- */
  .image-tile-btn {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
    padding: 0; border: none; border-radius: var(--apple-radius-lg); overflow: hidden;
    cursor: pointer; background: #e8e8ed; box-shadow: var(--apple-shadow-card);
  }
  .image-tile-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--apple-ease), opacity 0.3s ease; }
  .image-tile-btn:hover img, .image-tile-btn:focus-visible img { transform: scale(1.045); }
  .image-tile-hint {
    position: absolute; left: 50%; bottom: 1rem; transform: translate(-50%, 8px);
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 1rem; border-radius: 980px;
    background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 0.85rem; font-weight: 500;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s var(--apple-ease);
  }
  .image-tile-hint svg { width: 0.9rem; height: 0.9rem; }
  .image-tile-btn:hover .image-tile-hint, .image-tile-btn:focus-visible .image-tile-hint { opacity: 1; transform: translate(-50%, 0); }

  /* ---------- Accessibility: visible keyboard focus ---------- */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 3px;
    border-radius: 12px;
  }
  .apple-btn:focus-visible, .icon-btn:focus-visible, .image-tile-btn:focus-visible { border-radius: 980px; }

  /* ---------- Small screens ---------- */
  @media (max-width: 640px) {
    .library-header { padding: 1.35rem 1.1rem 1rem; }
    .library-footer { padding: 1rem 1.1rem 1.25rem; }
    .apple-table thead th, .apple-table tbody td { padding-left: 0.8rem; padding-right: 0.8rem; }
    .hero-stats { gap: 1.25rem; }
  }
</style>
{% endblock %}

{% block extra_head %}
<script>
  'use strict';

  /* Random image helpers — defined in <head> because inline onerror/onclick
     handlers on the <img> elements can fire while the body is still parsing.
     The random-image API picks from random subfolders and can 404 occasionally;
     retry with a fresh cache-buster a couple of times before giving up. */
  window.handleRandomImageError = function (img) {
    const retries = parseInt(img.dataset.retries || '0', 10);
    if (retries >= 2) return;
    img.dataset.retries = String(retries + 1);
    setTimeout(() => window.refreshRandomImage(img), 400 * (retries + 1));
  };

  window.refreshRandomImage = function (img) {
    if (!img) return;
    const box = img.getAttribute('data-box');
    const timestamp = new Date().getTime();
    const width = img.offsetWidth || 1200;
    const height = img.offsetHeight || 750;
    const newUrl = `/api/images/random/${width}/${height}/?fit=crop&v=${timestamp}&box=${box}`;

    const newImg = new Image();
    newImg.onload = function () {
      img.style.opacity = '0.4';
      setTimeout(() => {
        img.src = newUrl;
        img.dataset.retries = '0';
        img.style.opacity = '1';
      }, 160);
    };
    newImg.onerror = function () {
      console.warn('Random image request failed (the picker can 404 intermittently); retrying via onerror handler.');
      const currentUrl = new URL(img.src);
      currentUrl.searchParams.set('v', timestamp);
      img.src = currentUrl.toString();
      img.style.opacity = '1';
    };
    newImg.src = newUrl;
  };
</script>
{% endblock %}

{% block content %}
<div class="apple-wrap">

  <!-- ============ Hero ============ -->
  <section class="apple-hero" aria-labelledby="hero-title">
    <div class="hero-glow" aria-hidden="true"></div>

    <!-- <h1 id="hero-title" class="hero-title hero-anim">{% trans "GoLinks" %}.</h1> -->

    <div class="hero-search hero-anim" style="animation-delay: 0.24s;" role="search">
      <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
      <label for="main-search-input" class="sr-only">{% trans "Search aliases" %}</label>
      <input
        type="search"
        id="main-search-input"
        placeholder="{% trans 'Search aliases...' %}"
        autocomplete="off"
        autofocus
        role="combobox"
        aria-expanded="false"
        aria-controls="main-search-results"
        aria-autocomplete="list"
      >
      <div id="main-search-results" class="search-results" role="listbox" aria-label="{% trans 'Matching aliases' %}" hidden></div>
    </div>

    <div class="hero-stats hero-anim" style="animation-delay: 0.36s;">
      <div class="hero-stat">
        <span class="hero-stat-number">{{ links|length }}</span>
        <span class="hero-stat-label">{% trans "Links" %}</span>
      </div>
      <span class="hero-stat-divider" aria-hidden="true"></span>
      <div class="hero-stat">
        <span class="hero-stat-number">{{ total_clicks }}</span>
        <span class="hero-stat-label">{% trans "Total Clicks" %}</span>
      </div>
    </div>
  </section>

  <!-- ============ Link Library ============ -->
  <section class="apple-card home-section reveal" aria-labelledby="links-heading">
    <div class="library-header">
      <div class="library-title-group">
        <h2 id="links-heading" class="section-title">{% trans "Link List" %}</h2>
      </div>
      <div class="library-actions">
        <div class="library-filter">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
          </svg>
          <label for="search-alias-input" class="sr-only">{% trans "Search links" %}</label>
          <input type="search" id="search-alias-input" placeholder="{% trans 'Search links...' %}" autocomplete="off">
        </div>
        <a href="{% url 'link_create' %}" class="apple-btn apple-btn-primary">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
            <path d="M12 5v14m-7-7h14"></path>
          </svg>
          {% trans "New Link" %}
        </a>
      </div>
    </div>

    <form method="post" action="{% url 'delete_selected' %}">
      {% csrf_token %}
      <div class="table-scroll">
        <table class="apple-table">
          <thead>
            <tr>
              <th scope="col" style="width: 3rem;">
                <input type="checkbox" id="select-all" aria-label="{% trans 'Select all links' %}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
              </th>
              <th scope="col">
                <a href="?sort=alias&order={% if current_sort == 'alias' and current_order == 'asc' %}desc{% else %}asc{% endif %}">
                  {% trans "Alias" %}
                  {% if current_sort == 'alias' %}
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M{% if current_order == 'asc' %}19 9l-7 7-7-7{% else %}5 15l7-7 7 7{% endif %}"></path>
                    </svg>
                  {% endif %}
                </a>
              </th>
              <th scope="col" class="hidden sm:table-cell">
                <a href="?sort=link_type&order={% if current_sort == 'link_type' and current_order == 'asc' %}desc{% else %}asc{% endif %}">
                  {% trans "Type" %}
                  {% if current_sort == 'link_type' %}
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M{% if current_order == 'asc' %}19 9l-7 7-7-7{% else %}5 15l7-7 7 7{% endif %}"></path>
                    </svg>
                  {% endif %}
                </a>
              </th>
              <th scope="col" class="hidden md:table-cell">
                <a href="?sort=original_url&order={% if current_sort == 'original_url' and current_order == 'asc' %}desc{% else %}asc{% endif %}">
                  {% trans "Original URL" %}
                  {% if current_sort == 'original_url' %}
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M{% if current_order == 'asc' %}19 9l-7 7-7-7{% else %}5 15l7-7 7 7{% endif %}"></path>
                    </svg>
                  {% endif %}
                </a>
              </th>
              <th scope="col" class="hidden sm:table-cell">
                <a href="?sort=clicks&order={% if current_sort == 'clicks' and current_order == 'asc' %}desc{% else %}asc{% endif %}">
                  {% trans "Clicks" %}
                  {% if current_sort == 'clicks' %}
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M{% if current_order == 'asc' %}19 9l-7 7-7-7{% else %}5 15l7-7 7 7{% endif %}"></path>
                    </svg>
                  {% endif %}
                </a>
              </th>
              <th scope="col">{% trans "Actions" %}</th>
            </tr>
          </thead>
          <tbody id="links-table-body">
            {% for link in links %}
              <tr class="link-row">
                <td>
                  <input type="checkbox" name="selected_links" value="{{ link.id }}" aria-label="{% trans 'Select link' %} {{ link.alias }}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                </td>
                <td>
                  <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" rel="noopener noreferrer" class="alias-link">{{ link.alias }}</a>
                </td>
                <td class="hidden sm:table-cell">
                  {% if '{' in link.original_url and '}' in link.original_url %}
                    <span class="badge badge-template"><i class="fas fa-magic" aria-hidden="true"></i>{% trans "Template" %}</span>
                  {% elif link.link_type == 'LINK' %}
                    <span class="badge badge-link"><i class="fas fa-link" aria-hidden="true"></i>{% trans "Link" %}</span>
                  {% else %}
                    <span class="badge badge-custom"><i class="fas fa-code" aria-hidden="true"></i>{% trans "Custom" %}</span>
                  {% endif %}
                </td>
                <td class="hidden md:table-cell">
                  <div class="url-cell" title="{{ link.original_url }}">
                    <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" rel="noopener noreferrer">{{ link.original_url }}</a>
                  </div>
                </td>
                <td class="clicks-cell hidden sm:table-cell">{{ link.click_count }}</td>
                <td>
                  <div class="flex items-center gap-1">
                    <a href="{% url 'link_detail' link.id %}" class="icon-btn blue" title="{% trans 'View Details' %}" aria-label="{% trans 'View Details' %}">
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    </a>
                    <a href="{% url 'link_update' link.id %}" class="icon-btn green" title="{% trans 'Edit' %}" aria-label="{% trans 'Edit' %}">
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                      </svg>
                    </a>
                    <a href="{% url 'link_delete' link.id %}" class="icon-btn red" title="{% trans 'Delete' %}" aria-label="{% trans 'Delete' %}">
                      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" style="text-align: center; padding: 3rem 1rem; color: var(--apple-gray);">{% trans "No links available" %}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="library-footer">
        <p class="selection-hint" id="selection-hint" aria-live="polite"></p>
        <button type="submit" class="apple-btn apple-btn-danger">{% trans "Delete Selected" %}</button>
      </div>
    </form>
  </section>

  <!-- ============ Latest Posts ============ -->
  <section class="home-section reveal" aria-labelledby="posts-heading">
    <div class="section-header">
      <h2 id="posts-heading" class="section-title">{% trans "Latest Posts" %}</h2>
      <a href="{% url 'post-list' %}" class="apple-link">
        {% trans "View all posts" %}
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
    </div>
    {% if latest_posts %}
      <ul class="posts-grid" role="list">
        {% for post in latest_posts %}
          <li class="post-card reveal" style="--d: {{ forloop.counter0 }};">
            <a href="{{ post.get_absolute_url }}" class="post-card-link">
              <span class="post-card-date">{{ post.created_at|date:"M d, Y" }}</span>
              <span class="post-card-title">{{ post.title }}</span>
              {% if post.tags.all %}
                <span class="post-card-tags">
                  {% for tag in post.tags.all|slice:":2" %}
                    <span class="tag-pill">{{ tag.name }}</span>
                  {% endfor %}
                </span>
              {% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <div class="apple-card empty-state">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-2"/>
        </svg>
        <p>{% trans "No posts available yet" %}</p>
        <a href="{% url 'post-create' %}" class="apple-btn apple-btn-primary">{% trans "Create your first post" %}</a>
      </div>
    {% endif %}
  </section>

  <!-- ============ Pinned Mini Apps ============ -->
  <section class="home-section reveal" aria-labelledby="apps-heading">
    <div class="section-header">
      <h2 id="apps-heading" class="section-title">{% trans "Pinned Mini Apps" %}</h2>
    </div>
    <div class="tile-grid">
      {% for app in mini_apps %}
        {% if app.url != '#' %}
          <a href="{% url app.url %}" class="app-tile gradient-{% cycle '1' '2' '3' '4' %} reveal" style="--d: {{ forloop.counter0 }};" aria-label="{{ app.name }} — {{ app.description }}">
            <span class="tile-arrow" aria-hidden="true">
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H8M17 7v9"/>
              </svg>
            </span>
            <span class="app-tile-name">{{ app.name }}</span>
            <span class="app-tile-desc">{{ app.description }}</span>
          </a>
        {% else %}
          <div class="app-tile gradient-{% cycle '1' '2' '3' '4' %} reveal" style="--d: {{ forloop.counter0 }};">
            <span class="app-tile-name">{{ app.name }}</span>
            <span class="app-tile-desc">{{ app.description }}</span>
          </div>
        {% endif %}
      {% empty %}
        <p style="color: var(--apple-gray);">{% trans "No mini apps available" %}</p>
      {% endfor %}
    </div>
  </section>

  <!-- ============ Random Images ============ -->
  <section class="home-section reveal" aria-labelledby="images-heading" style="margin-bottom: 3.5rem;">
    <div class="section-header">
      <h2 id="images-heading" class="section-title">{% trans "Random Images" %}</h2>
    </div>
    <div class="tile-grid">
      <button type="button" class="image-tile-btn reveal" style="--d: 0;" onclick="refreshRandomImage(this.querySelector('img'))" aria-label="{% trans 'Shuffle image' %}">
        <img
          src="/api/images/random/1200/750/?fit=crop&v={{ timestamp }}"
          alt="{% trans 'Random Image' %}"
          data-box="1"
          loading="lazy"
          onerror="handleRandomImageError(this)"
        />
        <span class="image-tile-hint" aria-hidden="true">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
          {% trans "Shuffle" %}
        </span>
      </button>
      <button type="button" class="image-tile-btn reveal" style="--d: 1;" onclick="refreshRandomImage(this.querySelector('img'))" aria-label="{% trans 'Shuffle image' %}">
        <img
          src="/api/images/random/1200/750/?fit=crop&v={{ timestamp }}&offset=1"
          alt="{% trans 'Random Image' %}"
          data-box="2"
          loading="lazy"
          onerror="handleRandomImageError(this)"
        />
        <span class="image-tile-hint" aria-hidden="true">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
          {% trans "Shuffle" %}
        </span>
      </button>
    </div>
  </section>

</div>
{% endblock %}

{% block extra_js %}
<script>
  'use strict';

  document.addEventListener('DOMContentLoaded', function () {

    /* ---------- Scroll-reveal animations (respects reduced motion) ---------- */
    const revealEls = document.querySelectorAll('.reveal');
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion || !('IntersectionObserver' in window)) {
      revealEls.forEach(el => el.classList.add('in-view'));
    } else {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('in-view');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
      revealEls.forEach(el => observer.observe(el));
    }

    /* ---------- Hero search: alias autocomplete ---------- */
    setupMainSearch('main-search-input', 'main-search-results');

    function setupMainSearch(inputId, resultsId) {
      const searchInput = document.getElementById(inputId);
      const searchResults = document.getElementById(resultsId);
      if (!searchInput || !searchResults) return;

      let currentFocus = -1;

      function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
          clearTimeout(timeout);
          timeout = setTimeout(() => func(...args), wait);
        };
      }

      const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      const escapeHtml = s => s.replace(/[&<>"']/g, c => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
      }[c]));

      function highlightMatch(text, query) {
        const safe = escapeHtml(text);
        if (!query) return safe;
        const regex = new RegExp('(' + escapeRegExp(escapeHtml(query)) + ')', 'gi');
        return safe.replace(regex, '<mark>$1</mark>');
      }

      function closeResults() {
        searchResults.hidden = true;
        searchResults.innerHTML = '';
        searchInput.setAttribute('aria-expanded', 'false');
        searchInput.removeAttribute('aria-activedescendant');
        currentFocus = -1;
      }

      const chevronSvg = '<svg class="chev" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>';

      searchInput.addEventListener('input', debounce(function (e) {
        const query = e.target.value.trim();

        if (query.length === 0) {
          closeResults();
          return;
        }

        fetch(`/search/aliases/?q=${encodeURIComponent(query)}`)
          .then(response => response.json())
          .then(data => {
            searchResults.innerHTML = '';
            currentFocus = -1;

            if (Array.isArray(data) && data.length > 0) {
              data.forEach((item, index) => {
                if (item && typeof item === 'object' && 'alias' in item && 'url' in item) {
                  const div = document.createElement('div');
                  div.className = 'search-result-item';
                  div.setAttribute('role', 'option');
                  div.setAttribute('aria-selected', 'false');
                  div.id = `${resultsId}-opt-${index}`;

                  const aliasLink = document.createElement('a');
                  aliasLink.href = item.url;
                  aliasLink.innerHTML = highlightMatch(item.alias, query);

                  div.innerHTML = '';
                  div.appendChild(aliasLink);
                  div.insertAdjacentHTML('beforeend', chevronSvg);
                  div.addEventListener('click', function (e) {
                    if (e.target.tagName !== 'A') window.location.href = item.url;
                  });

                  searchResults.appendChild(div);
                }
              });
            } else {
              const empty = document.createElement('div');
              empty.className = 'search-empty';
              empty.textContent = '{% trans "No results found" %}';
              searchResults.appendChild(empty);
            }

            searchResults.hidden = false;
            searchInput.setAttribute('aria-expanded', 'true');
          })
          .catch(error => {
            console.error('Error:', error);
            closeResults();
          });
      }, 250));

      searchInput.addEventListener('keydown', function (e) {
        const items = searchResults.getElementsByClassName('search-result-item');

        if (e.key === 'ArrowDown') {
          e.preventDefault();
          setActive(items, currentFocus + 1);
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          setActive(items, currentFocus - 1);
        } else if (e.key === 'Enter') {
          if (currentFocus > -1 && items[currentFocus]) {
            e.preventDefault();
            items[currentFocus].querySelector('a').click();
          } else if (items.length > 0) {
            e.preventDefault();
            items[0].querySelector('a').click();
          }
        } else if (e.key === 'Escape') {
          closeResults();
          searchInput.value = '';
        }
      });

      function setActive(items, index) {
        if (!items || items.length === 0) return;
        Array.from(items).forEach(el => {
          el.classList.remove('active');
          el.setAttribute('aria-selected', 'false');
        });
        currentFocus = ((index % items.length) + items.length) % items.length;
        const active = items[currentFocus];
        active.classList.add('active');
        active.setAttribute('aria-selected', 'true');
        active.scrollIntoView({ block: 'nearest' });
        searchInput.setAttribute('aria-activedescendant', active.id);
      }

      document.addEventListener('click', function (e) {
        if (e.target !== searchInput && !searchResults.contains(e.target)) {
          closeResults();
        }
      });
    }

    /* ---------- Link table client-side filter ---------- */
    const filterInput = document.getElementById('search-alias-input');
    const tbody = document.getElementById('links-table-body');
    if (filterInput && tbody) {
      filterInput.addEventListener('keyup', function () {
        const searchTerm = filterInput.value.toLowerCase().trim();
        let visibleCount = 0;

        tbody.querySelectorAll('.link-row').forEach(row => {
          const aliasElement = row.querySelector('td:nth-child(2) a');
          if (!aliasElement) return;
          const shouldShow = aliasElement.textContent.toLowerCase().includes(searchTerm);
          row.style.display = shouldShow ? '' : 'none';
          if (shouldShow) visibleCount++;
        });

        const noResultsRow = document.getElementById('no-results-row');
        if (visibleCount === 0) {
          if (!noResultsRow) {
            const newRow = document.createElement('tr');
            newRow.id = 'no-results-row';
            newRow.innerHTML = '<td colspan="6" style="text-align:center; padding: 2.5rem 1rem; color: var(--apple-gray);">{% trans "No matching links found" %}</td>';
            tbody.appendChild(newRow);
          }
        } else if (noResultsRow) {
          noResultsRow.remove();
        }
      });
    }

    /* ---------- Select-all + selection hint ---------- */
    const selectAll = document.getElementById('select-all');
    const selectionHint = document.getElementById('selection-hint');

    function updateSelectionHint() {
      if (!selectionHint) return;
      const count = document.querySelectorAll('input[name="selected_links"]:checked').length;
      selectionHint.textContent = count > 0 ? count + ' {% trans "selected" %}' : '';
    }

    if (selectAll) {
      selectAll.addEventListener('change', function () {
        document.querySelectorAll('input[name="selected_links"]').forEach(checkbox => {
          checkbox.checked = selectAll.checked;
        });
        updateSelectionHint();
      });
    }
    document.addEventListener('change', function (e) {
      if (e.target.name === 'selected_links') updateSelectionHint();
    });
  });
</script>
{% endblock %}