<% function stTag(s){ var m={published:'paid',optimizing:'open',review:'pending',approved:'paid',draft:'draft'}; return '<span class="tag '+(m[s]||'draft')+'" style="white-space:nowrap">'+s.charAt(0).toUpperCase()+s.slice(1)+'</span>'; }
function scoreCol(v){ if(v==null) return '<span class="num muted">—</span>'; var c=v>=85?'var(--pos)':(v>=70?'var(--warn)':'var(--neg)'); return '<span class="num" style="color:'+c+'">'+v+'</span>'; }
function schemaChip(s){ return s==='yes'?'<span class="chip pos">✓</span>':(s==='partial'?'<span class="chip warn">partial</span>':(s==='missing'?'<span class="chip neg">missing</span>':'<span class="chip flat">—</span>')); }
var canManage = locals.showStaff; %>

<div id="content-center-view">
<%

  var _auto = articles.filter(function(a){ return a.discovered; }).length;

  var _broken = articles.filter(function(a){ return a.wpError; });
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">SEO &amp; Content / Content Center</div>
  </div>
  <div class="ph-right">

    <%- include('../partials/range-picker') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<%

  var _windowed = typeof total !== 'undefined' && total > articles.length;
%>
<% if (articles.length) { %>
  <p class="claim-lede">Your pipeline holds <em><%= articles.length %></em> article<%= articles.length===1?'':'s' %><% if (_windowed) { %>
    from <%= range.label.toLowerCase() %><% } %>.</p>
  <% if (_windowed) { %>
    <p class="claim-sub" style="margin-top:-4px"><b><%= h.int(total) %></b> in total across all periods.</p>
  <% } %>
<% } else if (typeof total !== 'undefined' && total) { %>

  <p class="claim-lede">No articles were started in <em><%= range.label.toLowerCase() %></em>.</p>
  <p class="claim-sub" style="margin-top:-4px"><b><%= h.int(total) %></b> in total. Choose a longer period to see them.</p>
<% } else { %>
  <p class="claim-lede">No articles yet.</p>
<% } %>
<%

  var _bits = [];
  if (counts.published) _bits.push('<b>' + counts.published + '</b> live');
  if (counts.review) _bits.push('<b>' + counts.review + '</b> waiting on approval');
  if (counts.draft) _bits.push('<b>' + counts.draft + '</b> still in draft');

  var _tone = counts.review ? 'warn' : 'info';
%>
<% if (_bits.length) { %>
  <%- include('../partials/claim-alert', { html: _bits.join(', ') + '.', tone: _tone }) %>
<% } %>

<p class="claim-sub"><% if (articles.length) { %>Every article from brief to published page, with its score and target prompt.<% } else { %>Articles are written here with your team or imported from Search Console.<% } %></p>

<% if (canManage) { %>
<details class="addbox" id="newart" style="margin-top:22px">
  <summary>+ New article / brief</summary>

  <form class="addform" method="POST" action="/api/articles" enctype="multipart/form-data">
    <div class="fld" style="flex:1;min-width:240px"><label for="cc-title">Title</label><input id="cc-title" name="title" placeholder="Article title" required></div>
    <div class="fld"><label for="cc-keyword">Target keyword <span class="rr-meta">(also the focus keyword)</span></label><input id="cc-keyword" name="targetKeyword" placeholder="e.g. geo agency"></div>
    <div class="fld"><label for="cc-prompt">Target prompt</label><input id="cc-prompt" name="targetPrompt" placeholder="e.g. best GEO agency"></div>

    <div class="fld" style="min-width:220px"><label for="cc-category">Category <span class="rr-meta">(from your WordPress)</span></label>
      <% if ((locals.categories || []).length) { %>
      <select id="cc-category" name="wpCategoryId">
        <option value="">No category</option>
        <% categories.forEach(function (c) { %><option value="<%= c.id %>"><%= c.name %><%= c.count ? ' · ' + c.count : '' %></option><% }) %>
      </select>
      <% } else { %>

      <div class="rr-meta" style="padding:9px 0; color:var(--neg)"><%= locals.catError || 'Categories unavailable.' %></div>
      <% } %>
    </div>

    <div class="fld" style="min-width:220px"><label for="cc-image">Featured image <span class="rr-meta">(goes to your media library)</span></label>
      <input id="cc-image" type="file" name="file" accept="image/*"></div>

    <div class="fld" style="flex:1 1 100%"><label for="cc-meta-title">SEO title <span class="rr-meta">(optional, around 60 characters. Blank uses the article title.)</span></label>
      <input id="cc-meta-title" name="metaTitle" maxlength="120" placeholder="How Google shows the headline"></div>
    <div class="fld" style="flex:1 1 100%"><label for="cc-meta-desc">Meta description <span class="rr-meta">(optional, around 155 characters)</span></label>
      <input id="cc-meta-desc" name="metaDescription" maxlength="320" placeholder="The two lines underneath it in the search result"></div>
    <div class="fld" style="flex:1 1 100%">
      <label for="cc-body">Body <span class="rr-meta" style="font-weight:400">(write it here; formatting carries through to WordPress)</span></label>
      <textarea id="cc-body" name="content" data-rte data-placeholder="Write the article… use the toolbar for headings, lists and links." rows="10"></textarea>
    </div>
    <button class="btn btn-primary btn-sm" type="submit">Add to pipeline</button>
  </form>
</details>
<% } %>

<div class="vnotch vn-navy" style="margin:26px 0 0">
  <span class="vn-fillet"></span>
  <a class="vn-cut" href="/content-center?status=review">In review<% if (counts.review) { %> · <%= counts.review %><% } %>
    <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M3 9L9 3M9 3H4.2M9 3v4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </a>

  <div class="vn-h"><% if (counts.review) { %><%= counts.review %> article<%= counts.review===1?'':'s' %> waiting on approval<% } else { %>Nothing is waiting on approval<% } %></div>
  <div class="vn-bar">Articles in review are published to WordPress after approval.</div>
</div>

<div class="bento" style="margin-top:22px">

  <% if (canManage && _broken.length) { %>
  <div class="voff b12">
    <div class="voff-h"><b><%= _broken.length %> article<%= _broken.length === 1 ? '' : 's' %> did not reach WordPress.</b> They are saved here but are not on the site yet.</div>
    <div class="voff-i">
      <span class="n"><%= _broken.slice(0, 3).map(function (x) { return x.title; }).join(', ') %><%= _broken.length > 3 ? ' and ' + (_broken.length - 3) + ' more' : '' %></span>
      <a href="/content-center/<%= _broken[0]._id %>">Open the first one</a>
    </div>
  </div>
  <% } %>

  <% if (articles.length) { %>

  <div class="card shelf-c b2 sc-violet"><div class="cl">Draft</div><div class="cv tnum"><%= counts.draft %></div></div>
  <div class="card shelf-c b2 sc-lime"><div class="cl">In review</div><div class="cv tnum"><%= counts.review %></div></div>
  <div class="card shelf-c b2 sc-navy"><div class="cl">Approved</div><div class="cv tnum"><%= counts.approved %></div></div>
  <div class="card shelf-c b2 sc-sky"><div class="cl">Published</div><div class="cv tnum"><%= counts.published %></div></div>
  <div class="card shelf-c b2 sc-sand"><div class="cl">Optimizing</div><div class="cv tnum"><%= counts.optimizing %></div></div>
  <div class="card shelf-c b2 sc-rose"><div class="cl">Imported from Search Console</div><div class="cv tnum"><%= _auto %></div></div>
  <% } %>

  <div class="card b12">
    <div class="card-h"><h3>Articles</h3><span class="hint"><%= articles.length %> total</span><span class="rr-end"><%- h.ihelp('The two scores',
      '<b>SEO score</b> and <b>AI-citability score</b> are measured for each article. A dash means the '
      + 'article has not been scored yet.'
      + '<br><br><b>Schema</b> shows what was found on the live page, so it stays blank until the article is published.') %></span></div>
    <div style="overflow-x:auto">
      <% if(!articles.length){ %>

      <% if (typeof total !== 'undefined' && total) { %><%- include('../partials/empty', { title: 'No articles in this period', line: 'Widen the dates above to see all ' + h.int(total) + '.' }) %><% } else { %><%- include('../partials/empty', { title: 'No articles yet', line: 'Articles you commission appear here from brief to published page.', cta: canManage ? { href: '#newart', label: 'New article / brief', cls: 'js-panel-open', attrs: ' data-panel="#newart"' } : { href: '/messages', label: 'Ask for an article' } }) %><% } %>
      <% } else { %>
      <table class="tbl"><thead><tr><th>Article</th><th>Status</th><th>SEO</th><th>Clicks</th><th>Position</th><th>AI score</th><th>Target keyword</th><th>Schema</th><th></th></tr></thead><tbody>
        <% articles.forEach(function(a){ %>
          <tr>

            <td class="strong"><a href="/content-center/<%= a._id %>" class="row-open"><%= a.title %></a><%- a.discovered?' <span class="chip flat" style="margin-left:4px" title="Imported from Search Console">auto</span>':'' %></td>

            <td style="white-space:nowrap"><%- stTag(a.status) %><% if (canManage && a.wpError) { %> <a class="chip neg" href="/content-center/<%= a._id %>" title="<%= a.wpError %>">sync failed</a><% } %></td>
            <td><%- scoreCol(a.seoScore) %></td>
            <td class="num"><%= a.clicks!=null?a.clicks:'—' %></td>
            <td class="num"><%= a.position!=null?a.position:'—' %></td>
            <td><%- scoreCol(a.aiScore) %></td>
            <td class="muted"><%= a.targetKeyword||'—' %></td>
            <td><%- schemaChip(a.schema) %></td>

            <td class="rowact-cell">
              <div class="rowact">
                <% if(canManage && a.status==='draft'){ %><form class="inline-form js-ajax-form" data-refresh="#content-center-view" method="POST" action="/api/articles/<%= a._id %>/status"><input type="hidden" name="status" value="review"><button class="more" style="background:none;border:0;cursor:pointer;color:var(--teal-600)">Send to review</button></form><% } %>
                <% if(a.status==='review'){ %><form class="inline-form js-ajax-form" data-refresh="#content-center-view" method="POST" action="/api/articles/<%= a._id %>/approve"><button class="more" style="background:none;border:0;cursor:pointer;color:var(--teal-600)">Approve</button></form><% } %>

                <% if(canManage && (a.status==='approved' || a.status==='optimizing') && a.content && a.wpStatus!=='publish'){ %><form class="inline-form" method="POST" action="/api/articles/<%= a._id %>/publish" onsubmit="return confirm('Publish this article to WordPress?')"><button class="more" style="background:none;border:0;cursor:pointer;color:var(--teal-600)">Publish</button></form><% } %>

                <% if(canManage){ %>
                <a class="rowact-b" href="/content-center/<%= a._id %>#edit" title="Edit this article" aria-label="Edit">
                  <svg viewBox="0 0 16 16" fill="none"><path d="M11.2 2.6l2.2 2.2M9.9 3.9l2.2 2.2-6.4 6.4-2.9.7.7-2.9z" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  <span>Edit</span>
                </a>
                <% } %>
                <a class="rowact-b" href="/content-center/<%= a._id %>" title="Open it in the portal" aria-label="Open">
                  <svg viewBox="0 0 16 16" fill="none"><path d="M1.4 8S3.9 3.4 8 3.4 14.6 8 14.6 8 12.1 12.6 8 12.6 1.4 8 1.4 8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><circle cx="8" cy="8" r="1.9" stroke="currentColor" stroke-width="1.4"/></svg>
                  <span>Open</span>
                </a>
                <% if(a.publishedUrl){ %>
                <a class="rowact-b" href="<%= a.publishedUrl %>" target="_blank" rel="noopener" title="Open the live page on the site" aria-label="View the live page">
                  <svg viewBox="0 0 16 16" fill="none"><path d="M9.4 2.6h4v4M13.4 2.6L7.6 8.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.6 9.6v3a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
                  <span>Live</span>
                </a>
                <% } %>

                <% if(canManage){ %><form class="inline-form js-delete-form" data-confirm="<%= a.wpPostId ? 'Delete this article here AND move the WordPress post to the trash? It stays recoverable in WordPress for 30 days.' : 'Delete this article? It is not on WordPress.' %>" data-refresh="#content-center-view" method="POST" action="/api/articles/<%= a._id %>/delete"><button class="icon-btn" title="<%= a.wpPostId ? 'Delete here and trash on WordPress' : 'Delete' %>" aria-label="Delete">&times;</button></form><% } %>
              </div>
            </td>
          </tr>
        <% }) %>
      </tbody></table>
      <% } %>
    </div>
  </div>
</div>
</div>
