<%

  var _st = !!locals.showStaff;
  var _tabs = [
    ['overview', 'Overview', '/link-building', _st ? 0 : waiting],
    ['plan', 'Link Plan', '/link-building/plan'],
    ['content', 'Content Approvals', '/link-building/content', _st ? 0 : waitPosts],
    ['posts', 'Guest Posts', '/link-building/posts'],
    ['links', 'Live Links', '/link-building/links', _st ? review + lost : 0],
    ['citations', 'AI Citations', '/link-building/citations'],
    ['sites', 'Sites', '/link-building/sites', _st ? 0 : waitSites]
  ];
  if (_st) _tabs.push(['settings', 'Settings', '/link-building/settings']);
  var _crumb = locals.crumb;
%>
<div class="pg-head" style="margin-bottom:0">
  <div><div class="eyebrow">Link Building / <% if (_crumb) { %><a href="<%= _crumb[1] %>" style="text-decoration:none"><%= _crumb[0] %></a><% } else { %><%= title === 'Link Building' ? 'Overview' : title %><% } %></div></div>
  <div class="ph-right" style="display:flex; gap:10px; align-items:center; flex-wrap:wrap">
    <span class="rr-meta"><%= lastCheck ? 'Links checked ' + h.date(lastCheck) + ', ' + h.time(lastCheck) : 'No link checked yet' %></span>
    <% if (_st && ws && ws.isDemo === true) { %>
      <span class="chip flat">Demo data, nothing runs</span>
    <% } else if (_st) { %>
      <form class="js-rep" method="POST" action="/api/links/run" data-confirm="Check every live link of <%= brand %> now and look for new AI citations? Free: it reads the publishers' pages directly."><button class="btn btn-primary btn-sm" type="submit">Check now</button></form>
    <% } %>
  </div>
</div>
<h1 class="claim" style="margin-bottom:6px"><%= title %></h1>

<nav class="lb-tabs" aria-label="Link Building sections">
  <% _tabs.forEach(function (t) { var _bad = t[0] === 'links'; %><a class="<%= tab === t[0] ? 'on' : '' %>" href="<%= t[2] %>"<%= tab === t[0] ? ' aria-current="page"' : '' %>><span><%= t[1] %></span><% if (t[3]) { %><b class="lb-badge<%= _bad ? ' bad' : '' %>" title="<%= _bad ? 'Links that need a look' : 'Waiting for approval' %>"><%= t[3] %></b><% } %></a><% }) %>
</nav>
<style>

  .lb-tabs{display:flex; gap:2px; margin:16px 0 6px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
  .lb-tabs::-webkit-scrollbar{display:none}
  .lb-tabs a{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; font-size:13.5px; font-weight:600; color:var(--muted); white-space:nowrap; text-decoration:none; border-radius:10px 10px 0 0; transition:color .15s, background .15s}
  .lb-tabs a:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent)}
  .lb-tabs a.on{color:var(--ink)}
  .lb-tabs a.on::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--accent-strong)}
  .lb-badge{min-width:20px; height:20px; padding:0 6px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; line-height:1; background:color-mix(in srgb, var(--accent-strong) 14%, transparent); color:var(--accent-strong)}
  .lb-badge.bad{background:var(--neg-tint); color:var(--neg)}

  .gpf-sec{padding:18px 22px 20px; border-top:1px solid var(--line-2)} .gpf-sec:first-child{border-top:0}
  .gpf-h{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
  .gpf-h b{display:block; font-size:14.5px; color:var(--ink)} .gpf-h span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
  .gpf-n{flex:none; width:26px; height:26px; border-radius:8px; background:var(--surface-2); color:var(--ink-2); font-size:12.5px; font-weight:700; display:inline-flex !important; align-items:center; justify-content:center; margin:0 !important}
  .gpf-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; padding-left:38px}
  .gpf-grid.c4{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .gpf-grid.gpf-row4{grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)}
  .gpf-grid.c3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .gpf-in{padding-left:38px}
  .gpf-wide{grid-column:1 / -1}
  .gpf-f{display:flex; flex-direction:column; gap:6px; min-width:0}
  .gpf-f > span{font-size:12.5px; font-weight:600; color:var(--ink)} .gpf-f > span em{font-style:normal; font-weight:500; color:var(--muted)}
  .gpf-f input, .gpf-f select, .gpf-f textarea, .lbm-row input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; box-sizing:border-box}
  .gpf-f input:focus, .gpf-f select:focus, .gpf-f textarea:focus, .lbm-row input:focus{outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-strong) 18%, transparent)}
  .gpf-pair{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:6px}
  .gpf-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px; background:var(--surface-2); border-top:1px solid var(--line-2); font-size:12.5px; color:var(--muted)} .gpf-foot b{color:var(--ink-2)}
  .gpf-lock{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--surface-2); color:var(--muted); margin-left:8px; vertical-align:middle}
  .lbm{display:flex; flex-direction:column; gap:8px}
  .lbm-list{display:flex; flex-direction:column; gap:8px}
  .lbm-row{display:grid; grid-template-columns:minmax(0, 1fr) 38px; gap:8px}
  .lbm-x{border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--muted); font-size:18px; cursor:pointer; line-height:1}
  .lbm-x:hover{color:var(--neg); border-color:var(--neg)}
  .lbm-list .lbm-row:only-child .lbm-x{visibility:hidden}
  .lbm-add{align-self:flex-start; border:0; background:none; padding:2px 0; color:var(--accent-strong); font:inherit; font-size:13px; font-weight:600; cursor:pointer}
  @media (max-width:860px){ .gpf-grid, .gpf-grid.c4, .gpf-grid.c3, .gpf-grid.gpf-row4{grid-template-columns:minmax(0, 1fr); padding-left:0} .gpf-in{padding-left:0} .gpf-sec{padding:16px} }
  .lb-kv{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:8px 14px; font-size:13px; margin:0} .lb-kv dt{color:var(--muted)} .lb-kv dd{margin:0; color:var(--ink); word-break:break-word}
  .lb-url{font-size:12.5px; color:var(--pos); word-break:break-all}
  .lb-mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px}
  .lb-pipe{display:flex; gap:4px; flex-wrap:wrap; margin-top:8px}
  .lb-pipe span{font-size:11px; padding:3px 8px; border-radius:99px; background:var(--surface-2); color:var(--muted)}
  .lb-pipe span.done{background:color-mix(in srgb, var(--pos) 14%, transparent); color:var(--ink-2)}
  .lb-pipe span.now{background:var(--ink); color:var(--surface); font-weight:600}
  .lb-pipe span.bad{background:var(--neg-tint); color:var(--neg); font-weight:600}
  .lb-tbl{width:100%; border-collapse:collapse; font-size:13px}
  .lb-tbl th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap}
  .lb-tbl td{padding:11px 14px; border-top:1px solid var(--line-2); vertical-align:top}
  .lb-tbl tr:first-child td{border-top:0}
  .lb-wrap{overflow-x:auto}
  .lb-bar{display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--surface-2)} .lb-bar i{display:block; height:100%}
  .lb-meter{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:10px} .lb-meter i{display:block; height:100%; background:var(--accent-strong); border-radius:99px}
  .lb-warn{padding:10px 14px; border-radius:10px; background:var(--warn-tint); color:var(--warn-ink); font-size:12.5px; margin-top:8px}
  .lb-new{display:inline-flex; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:var(--accent-strong); color:#fff}
  .lb-pre{display:inline-flex; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-2)}
  .lb-feed{list-style:none; margin:0; padding:6px 0}
  .lb-feed li{display:grid; grid-template-columns:86px minmax(0, 1fr); gap:12px; padding:9px 22px; font-size:13px; border-top:1px solid var(--line-2)} .lb-feed li:first-child{border-top:0}
  .lb-feed time{color:var(--muted); font-size:12px} .lb-feed b{font-weight:600} .lb-feed .pos b{color:var(--pos)} .lb-feed .neg b{color:var(--neg)}
  .lb-feed a{color:var(--ink)}
  @media (max-width:700px){ .lb-kv{grid-template-columns:1fr} .lb-feed li{grid-template-columns:1fr; gap:2px; padding:9px 16px} }
</style>
<script>
(function () {
  if (window.__lbmBound) return; window.__lbmBound = true;
  document.addEventListener('click', function (e) {
    var a = e.target.closest && e.target.closest('.lbm-add');
    if (a) { var box = a.closest('.lbm'); var row = box.querySelector('.lbm-tpl').content.firstElementChild.cloneNode(true); box.querySelector('.lbm-list').appendChild(row); row.querySelector('input').focus(); return; }
    var x = e.target.closest && e.target.closest('.lbm-x');
    if (x) { var b = x.closest('.lbm'); if (b.querySelectorAll('.lbm-list .lbm-row').length > 1) x.closest('.lbm-row').remove(); else x.closest('.lbm-row').querySelector('input').value = ''; }
  });
})();
</script>
