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

{% block content %}
<style>
  :root{
    --bm-bg:#f5f5f7; --bm-card:#ffffff; --bm-bd:rgba(0,0,0,.06); --bm-bd2:rgba(0,0,0,.10);
    --bm-txt:#1d1d1f; --bm-txt2:#3d434c; --bm-muted:#6e6e73; --bm-muted2:#8a8a8e;
    --bm-accent:#0071e3; --bm-accent2:#0077ed; --bm-soft:rgba(0,113,227,.10);
    --bm-radius:22px; --bm-shadow:0 4px 24px rgba(0,0,0,.05);
    --bm-shadow-hover:0 18px 44px rgba(0,0,0,.10);
  }
  body{
    background-color: var(--bm-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--bm-txt);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* shell max-width matches the post-detail layout (#post-toc-layout: 80rem) */
  #bm-shell{max-width:80rem;margin:0.5rem auto;padding:0.5rem 0.75rem 100px}
  #bm-page{padding:0}
  #bm-header{
    position:relative;
    background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border:1px solid var(--bm-bd); border-radius:var(--bm-radius);
    padding:16px 22px 14px; margin:0 0 14px;
    box-shadow:var(--bm-shadow);
  }
  #bm-header .htop{display:flex;flex-direction:column;gap:10px}
  #bm-header .brand-row{display:flex;align-items:center;gap:9px}
  #bm-header h1{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--bm-txt)}
  #bm-header .logo{
    width:30px;height:30px;border-radius:50%;background:var(--bm-txt);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;
    font-size:15px;font-family:Georgia,serif;
  }
  #bm-header .count-sub{margin-left:auto;font-size:12.5px;color:var(--bm-muted);font-weight:500}
  .bm-search-wrap{position:relative;flex:1;max-width:32rem}
  .bm-search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--bm-muted2)}
  #bm-q{width:100%;background:var(--bm-bg);border:1px solid transparent;color:var(--bm-txt);
    border-radius:980px;padding:9px 16px 9px 38px;font-size:14.5px;outline:none;transition:.18s}
  #bm-q:focus{background:#fff;border-color:var(--bm-accent);box-shadow:0 0 0 3px var(--bm-soft)}
  .bm-filters{display:flex;gap:6px;flex-wrap:wrap}
  .bm-chip{
    display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bm-bd);
    color:var(--bm-muted);border-radius:980px;padding:6px 12px;font-size:13px;font-weight:600;
    cursor:pointer;user-select:none;transition:.15s;white-space:nowrap;
  }
  .bm-chip:hover{background:var(--bm-bg);color:var(--bm-txt2);border-color:var(--bm-bd2)}
  .bm-chip.active{background:var(--bm-accent);border-color:var(--bm-accent);color:#fff;box-shadow:0 6px 18px rgba(0,113,227,.28)}
  .bm-chip .n{opacity:.65;font-weight:600;margin-left:2px}
  .bm-chip.active .n{opacity:.9}
  #bm-meta{font-size:12px;color:var(--bm-muted);padding:10px 4px 0}
  /* feed column keeps a readable width, centered within the wider shell */
  #bm-list{max-width:44rem;margin:0 auto}
  /* cards */
  .bm-tweet{
    background:var(--bm-card);border:1px solid var(--bm-bd);border-radius:var(--bm-radius);
    padding:18px 20px;margin-bottom:14px;box-shadow:var(--bm-shadow);
    content-visibility:auto;contain-intrinsic-size:0 420px;transition:box-shadow .2s ease,border-color .2s ease;
  }
  .bm-tweet:hover{box-shadow:var(--bm-shadow-hover);border-color:var(--bm-bd2)}
  .bm-tweet a{color:var(--bm-accent);text-decoration:none}
  .bm-tweet a:hover{text-decoration:underline}
  .bm-head{display:flex;align-items:flex-start;gap:11px}
  .bm-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;
    background:var(--bm-bg);border:1px solid var(--bm-bd)}
  .bm-who{line-height:1.22;font-size:15px;min-width:0;flex:1}
  .bm-who .top{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .bm-who .name{font-weight:700;color:var(--bm-txt)}
  .bm-who .handle,.bm-who .sep,.bm-who .time{color:var(--bm-muted);font-size:14px}
  .bm-ext{color:var(--bm-muted2);display:inline-flex;margin-left:auto}
  .bm-ext:hover{color:var(--bm-accent)}
  .bm-text{font-size:16px;line-height:1.5;margin:11px 0 0;white-space:pre-wrap;
    word-wrap:break-word;unicode-bidi:plaintext;color:var(--bm-txt)}
  .bm-summary{margin-top:9px;font-size:13.5px;color:#1e7b34;background:rgba(48,209,88,.10);
    border:1px solid rgba(48,209,88,.25);border-radius:10px;padding:6px 10px}
  /* media */
  .bm-media{margin-top:13px;display:grid;gap:4px}
  .bm-media.one{grid-template-columns:1fr}
  .bm-media.two{grid-template-columns:1fr 1fr}
  .bm-media.three{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
  .bm-media.three .bm-cell:nth-child(1){grid-row:1 / span 2}
  .bm-media.four{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .bm-cell{position:relative;overflow:hidden;border-radius:14px;cursor:pointer;
    background:#0d1b27;min-height:130px;display:block;text-decoration:none}
  .bm-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .2s}
  .bm-cell:hover img{filter:brightness(.92)}
  .bm-vbadge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.65);color:#fff;
    font-size:10.5px;padding:2px 8px;border-radius:6px;pointer-events:none;font-weight:600}
  .bm-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .bm-play .ring{width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(2px)}
  .bm-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;
    font-size:11px;padding:1px 6px;border-radius:4px;pointer-events:none;font-weight:600}
  .bm-xbadge{position:absolute;right:8px;top:8px;background:rgba(0,113,227,.92);color:#fff;
    font-size:10px;padding:1px 7px;border-radius:5px;font-weight:700;pointer-events:none}
  /* card link */
  .bm-cardlink{border:1px solid var(--bm-bd);border-radius:14px;overflow:hidden;display:flex;
    text-decoration:none;color:var(--bm-txt);margin-top:13px;transition:border-color .15s,background .15s}
  .bm-cardlink:hover{border-color:var(--bm-bd2);background:var(--bm-bg);text-decoration:none}
  .bm-cardlink .ci{flex:1;padding:11px 13px;min-width:0}
  .bm-cardlink .csite{color:var(--bm-muted2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bm-cardlink .ct{font-weight:700;margin:3px 0 2px;font-size:15px;line-height:1.25}
  .bm-cardlink .cd{color:var(--bm-muted);font-size:13px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bm-cardlink img{width:140px;max-height:200px;object-fit:cover;flex:0 0 140px}
  /* quote */
  .bm-quote{margin-top:13px;border:1px solid var(--bm-bd);border-radius:14px;padding:13px 14px;
    cursor:pointer;background:var(--bm-bg);transition:border-color .15s,background .15s}
  .bm-quote:hover{border-color:var(--bm-bd2);background:#ececef}
  .bm-quote .qhead{display:flex;gap:8px;align-items:center;font-size:14px}
  .bm-quote .qhead img{width:22px;height:22px;border-radius:50%;border:1px solid var(--bm-bd)}
  .bm-quote .qhead .name{font-weight:700}
  .bm-quote .qhead .handle,.bm-quote .qhead .sep{color:var(--bm-muted);font-size:13px}
  .bm-quote .qtext{font-size:15px;margin-top:9px;white-space:pre-wrap;unicode-bidi:plaintext;
    line-height:1.45;color:var(--bm-txt2)}
  .bm-quote .media{margin-top:9px}
  /* metrics */
  .bm-metrics{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap;color:var(--bm-muted);
    font-size:13px;padding-top:11px;border-top:1px solid var(--bm-bd)}
  .bm-metric{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 0}
  .bm-metric.bkm{color:var(--bm-accent2);font-weight:600}
  /* empty */
  .bm-empty{color:var(--bm-muted);text-align:center;padding:80px 20px;font-size:15px}
  .bm-empty .tle{font-size:18px;color:var(--bm-txt2);margin-bottom:6px;font-weight:600}
  /* to-top */
  #bm-totop{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
    background:var(--bm-accent);color:#fff;border:none;cursor:pointer;z-index:60;
    box-shadow:0 6px 18px rgba(0,113,227,.32);display:none;align-items:center;justify-content:center;
    transition:transform .15s,background .15s}
  #bm-totop:hover{transform:translateY(-2px);background:var(--bm-accent2)}
  #bm-totop.show{display:flex}
  /* lightbox */
  #bm-lightbox{position:fixed;inset:0;background:rgba(13,27,39,.94);display:none;
    align-items:center;justify-content:center;z-index:100;cursor:zoom-out;padding:30px}
  #bm-lightbox img{max-width:96vw;max-height:94vh;border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.5)}
  @media (max-width:640px){
    #bm-header{padding:14px 16px 12px}
    .bm-search-wrap{max-width:none}
  }
</style>

<!-- shell max-width mirrors post-detail's #post-toc-layout for a consistent app-wide page width -->
<div id="bm-shell">
  <div id="bm-header">
    <div class="htop">
      <div class="brand-row">
        <div class="logo">X</div>
        <h1>{% trans "Bookmarks Archive" %}</h1>
        <span class="count-sub" id="bm-count">{{ stats.total }} {% trans "bookmarks" %}</span>
      </div>
      <div class="bm-search-wrap">
        <svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <input id="bm-q" type="search" placeholder="{% trans 'Search text, author, handle…' %}" autocomplete="off">
      </div>
      <div class="bm-filters" id="bm-filters">
        <button class="bm-chip active" data-f="all">{% trans "All" %}<span class="n">{{ stats.total }}</span></button>
        <button class="bm-chip" data-f="photo">{% trans "Photos" %}<span class="n">{{ stats.has_photo }}</span></button>
        <button class="bm-chip" data-f="video">{% trans "Videos" %}<span class="n">{{ stats.has_video }}</span></button>
        <button class="bm-chip" data-f="text">{% trans "Text" %}<span class="n"></span></button>
        <button class="bm-chip" data-f="quote">{% trans "Quotes" %}<span class="n">{{ stats.is_quote }}</span></button>
        <button class="bm-chip" data-f="card">{% trans "Links" %}<span class="n">{{ stats.has_card }}</span></button>
      </div>
    </div>
  </div>

  <div id="bm-page">
    <div id="bm-meta"></div>
    <div id="bm-list">
      {% include "links/includes/bookmark_list_items.html" %}
    </div>
  </div>
</div>

<button id="bm-totop" title="Back to top" aria-label="Back to top">
  <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</button>
<div id="bm-lightbox" onclick="this.style.display='none';document.getElementById('bm-lb-img').src='';">
  <img id="bm-lb-img" src="" alt="">
</div>

<script>
// ---- client-side instant search + filter ----
(function(){
  const list = document.getElementById('bm-list');
  const qInput = document.getElementById('bm-q');
  const meta = document.getElementById('bm-meta');
  let currentFilter = 'all';
  let qs = '';

  // compute text-only count
  const allCards = list.querySelectorAll('.bm-tweet');
  let textCount = 0;
  allCards.forEach(c => { if(!c.dataset.media) textCount++; });
  document.querySelector('.bm-chip[data-f=text] .n').textContent = textCount;
  const total = allCards.length;

  const filters = document.getElementById('bm-filters');
  filters.addEventListener('click', e => {
    const b = e.target.closest('.bm-chip'); if(!b) return;
    filters.querySelectorAll('.bm-chip').forEach(x=>x.classList.remove('active'));
    b.classList.add('active'); currentFilter = b.dataset.f; render();
  });
  qInput.addEventListener('input', e => { qs = e.target.value.toLowerCase().trim(); render(); });

  function passes(c){
    if(currentFilter==='photo') return c.dataset.photo==='1';
    if(currentFilter==='video') return c.dataset.video==='1';
    if(currentFilter==='text')  return !c.dataset.media;
    if(currentFilter==='quote') return c.dataset.quote==='1';
    if(currentFilter==='card')  return c.dataset.card==='1';
    return true;
  }
  function render(){
    let shown=0;
    for(const c of allCards){
      let show = passes(c);
      if(show && qs){
        show = (c.dataset.blob||'').includes(qs);
      }
      c.style.display = show ? '' : 'none';
      if(show) shown++;
    }
    meta.textContent = 'Showing '+shown+' of '+total+' bookmarks · '
      + (qs||currentFilter!=='all' ? 'filtered' : 'all');
  }
  render();
})();

// ---- lightbox ----
window.bmLightbox = function(el){
  const full = el.getAttribute('data-full') || (el.querySelector('img')&&el.querySelector('img').src);
  if(!full) return;
  const lb = document.getElementById('bm-lightbox');
  document.getElementById('bm-lb-img').src = full;
  lb.style.display = 'flex';
};

// ---- back to top ----
(function(){
  const b = document.getElementById('bm-totop'); let t=false;
  window.addEventListener('scroll', ()=>{
    if(!t){ requestAnimationFrame(()=>{ b.classList.toggle('show', window.scrollY>600); t=false; }); t=true; }
  });
  b.onclick = ()=>window.scrollTo({top:0,behavior:'smooth'});
})();
</script>
{% endblock %}