<%

var _svc = locals.services || [];
var _MOD = locals.MODULES || {};
var ORDER = ['seo', 'geo', 'content', 'ppc', 'serm', 'links'];
var LABEL = { seo: 'SEO & Content', geo: 'AI Search (GEO)', content: 'Content Center', ppc: 'Paid Media (PPC)', serm: 'Reputation', links: 'Link Building' };
var _ex = (locals.excluded || []).map(String);
var _eng = locals.AI_ENGINES || [];
var NOTE = { seo: 'Includes the Overview section and the Dashboard.', geo: 'Brand Health also needs SEO & Content.' };
%>
<div class="mpk">
  <% ORDER.forEach(function (k) { var on = _svc.indexOf(k) > -1; var pages = (_MOD[k] && _MOD[k].pages) || []; %>
    <label class="mpk-c k-<%= k %> <%= on ? 'on' : '' %>">
      <input type="checkbox" name="services" value="<%= k %>" <%= on ? 'checked' : '' %> onchange="this.closest('.mpk-c').classList.toggle('on', this.checked)<%= k === 'geo' ? "; var e = document.getElementById('mpk-eng'); if (e) e.hidden = !this.checked" : '' %>">
      <span class="mpk-b">
        <span class="mpk-t"><%= LABEL[k] %><span class="mpk-n"><%= pages.length %> page<%= pages.length === 1 ? '' : 's' %></span></span>
        <span class="mpk-p"><% pages.forEach(function (p) { %><i><%= p %></i><% }) %></span>
        <% if (NOTE[k]) { %><span class="mpk-x"><%= NOTE[k] %></span><% } %>
      </span>
    </label>
  <% }) %>
</div>
<% if (_eng.length) { %>
<div class="mpk-eng" id="mpk-eng"<%= _svc.indexOf('geo') > -1 ? '' : ' hidden' %>>
  <input type="hidden" name="enginesForm" value="1">
  <div class="mpk-eh"><b>AI engines for this client</b><span>Unticked engines are left out everywhere in their portal: AI Visibility runs, Prompt Explorer, Brand Health and Reputation AI answers.</span></div>
  <div class="mpk-el">
    <% _eng.forEach(function (e) { var on = e.live && _ex.indexOf(e.code) < 0; %>
      <label class="mpk-e <%= e.live ? '' : 'off' %>" title="<%= e.live ? '' : 'No API key set on the server' %>">
        <% if (e.live) { %><input type="checkbox" name="engines" value="<%= e.code %>" <%= on ? 'checked' : '' %>><% } else { %><input type="checkbox" disabled><% } %>
        <%- include('engine-mark', { engine: e.name, size: 'sm' }) %><span><%= e.name %></span><% if (!e.live) { %><em>no key</em><% } %>
      </label>
    <% }) %>
  </div>
</div>
<% } %>
<div class="rr-meta" style="margin-top:12px; line-height:1.55">Unticked modules stay in the client's sidebar with a lock and a "Request this service" button, and their pages show the same. A client without SEO &amp; Content opens on the first page of a module they have.</div>
<style>
  .mpk{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
  .mpk-c.k-seo{grid-column:span 2}
  @media (max-width:900px){ .mpk{grid-template-columns:1fr 1fr} .mpk-c.k-seo{grid-column:1 / -1} }
  @media (max-width:560px){ .mpk{grid-template-columns:1fr} }
  .mpk-c{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s}
  .mpk-c:hover{border-color:var(--muted-2)}
  .mpk-c.on{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 5%, var(--surface))}
  .mpk-c input{width:auto; margin:3px 0 0; flex:none; accent-color:var(--teal)}
  .mpk-b{display:flex; flex-direction:column; gap:8px; min-width:0}
  .mpk-t{display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-weight:700; font-size:14px; color:var(--ink)}
  .mpk-n{font-weight:500; font-size:11.5px; color:var(--muted); white-space:nowrap}
  .mpk-p{display:flex; flex-wrap:wrap; gap:5px} .mpk-p i{font-style:normal; font-size:11.5px; padding:2px 8px; border-radius:99px; background:var(--surface-2); color:var(--ink-2)}
  .mpk-c.on .mpk-p i{background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--ink)}
  .mpk-x{font-size:11.5px; color:var(--muted)}
  .mpk-eng{margin-top:10px; padding:14px 16px; border:1px dashed var(--line); border-radius:14px; background:var(--surface-2)}
  .mpk-eng[hidden]{display:none}
  .mpk-eh{display:flex; flex-direction:column; gap:3px; margin-bottom:10px} .mpk-eh b{font-size:13.5px; color:var(--ink)} .mpk-eh span{font-size:12px; color:var(--muted)}
  .mpk-el{display:flex; flex-wrap:wrap; gap:8px}
  .mpk-e{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line); border-radius:99px; background:var(--surface); font-size:13px; color:var(--ink); cursor:pointer}
  .mpk-e input{width:auto; margin:0; accent-color:var(--teal)}
  .mpk-e:has(input:checked){border-color:var(--teal); background:color-mix(in srgb, var(--teal) 7%, var(--surface))}
  .mpk-e.off{opacity:.55; cursor:not-allowed} .mpk-e em{font-style:normal; font-size:11px; color:var(--muted)}
</style>
