<h1><%= config.brand.name %></h1>
<% if (config.brand.description) { %>
<p class="description"><%= config.brand.description %></p>
<% } %>

<div class="card-grid">
  <div class="card">
    <h3>Colors</h3>
    <p class="count"><%= Object.keys(index.base.colorsAndType ? index.base.colorsAndType.customProperties : {}).length %></p>
    <a href="/colors">View palette</a>
  </div>
  <div class="card">
    <h3>Tokens</h3>
    <p class="count"><%= index.base.tokens.length %></p>
    <a href="/tokens">View specimens</a>
  </div>
  <div class="card">
    <h3>Components</h3>
    <p class="count"><%= index.base.components.length %></p>
    <a href="/components">View specs</a>
  </div>
  <div class="card">
    <h3>Assets</h3>
    <p class="count"><%= index.base.assets.length %></p>
    <a href="/assets">View assets</a>
  </div>
  <div class="card">
    <h3>Fonts</h3>
    <p class="count"><%= index.base.fonts.length %></p>
    <a href="/fonts">View faces</a>
  </div>
  <div class="card">
    <h3>Motion</h3>
    <p class="count"><%= index.base.motion ? 'yes' : 'no' %></p>
    <a href="/motion">View system</a>
  </div>
</div>

<h2>Verbal Layer</h2>
<table class="data-table">
  <thead><tr><th>Document</th><th>Present</th></tr></thead>
  <tbody>
    <% const verbalRows = [
      ['Positioning', index.verbal.positioning],
      ['Audience', index.verbal.audience],
      ['Messaging', index.verbal.messaging],
      ['Differentiation', index.verbal.differentiation],
      ['Concepts', index.verbal.concepts],
      ['Voice', index.verbal.voice],
      ['Magic Trick', index.magicTrick],
    ]; %>
    <% for (const [label, doc] of verbalRows) { %>
    <tr><td><a href="/verbal"><%= label %></a></td><td><%= doc ? 'yes' : 'no' %></td></tr>
    <% } %>
  </tbody>
</table>

<% if (index.warnings.length > 0) { %>
<h2>Scan Warnings</h2>
<ul>
  <% for (const w of index.warnings) { %><li><%= w %></li><% } %>
</ul>
<% } %>
