<div class="admin-card" style="margin-bottom:24px;background:#fffbeb;border-color:#fde68a;padding:14px 20px">
  <p style="margin:0;font-size:.875rem;color:#92400e">
    <i class="bi bi-info-circle-fill" style="color:#d97706;margin-right:8px"></i>
    <strong>Settings are managed via the <code style="background:#fef3c7;padding:1px 5px;border-radius:4px">.env</code> file.</strong>
    Edit <code style="background:#fef3c7;padding:1px 5px;border-radius:4px">.env</code> on the server and restart the application for changes to take effect. Sensitive values are masked.
  </p>
</div>

<%
const sectionMeta = {
  app:      { label: 'Application',       icon: 'bi-house-fill' },
  database: { label: 'Database',          icon: 'bi-database-fill' },
  payments: { label: 'Payments (Stripe)', icon: 'bi-credit-card-fill' },
  email:    { label: 'Email (SMTP)',       icon: 'bi-envelope-fill' },
  wallet:   { label: 'B2B Wallet',        icon: 'bi-wallet2' },
  session:  { label: 'Security',          icon: 'bi-shield-lock-fill' }
};
%>

<% Object.entries(env).forEach(([section, rows]) => { %>
<div class="admin-card" style="margin-bottom:20px">
  <div class="ac-header" style="margin-bottom:0;padding-bottom:14px;border-bottom:1px solid #f3f4f6">
    <h3 style="margin:0;display:flex;align-items:center;gap:8px">
      <i class="bi <%= (sectionMeta[section]||{}).icon || 'bi-gear-fill' %>" style="color:#1a56db"></i>
      <%= (sectionMeta[section]||{}).label || section %>
    </h3>
  </div>
  <table class="admin-table" style="margin-top:0">
    <thead>
      <tr><th style="width:40%">Setting</th><th style="width:30%;font-family:monospace;font-weight:500">ENV Key</th><th>Value</th></tr>
    </thead>
    <tbody>
      <% rows.forEach(row => { %>
      <tr>
        <td><strong style="font-size:.85rem"><%= row.label %></strong></td>
        <td><code style="font-size:.75rem;background:#f3f4f6;padding:2px 6px;border-radius:4px;color:#6b7280"><%= row.key %></code></td>
        <td>
          <% if (row.value === '—') { %>
            <span style="color:#d1d5db;font-size:.85rem">Not set</span>
          <% } else if (row.secret) { %>
            <code style="font-size:.82rem;color:#374151"><%= row.value %></code>
          <% } else { %>
            <span style="font-size:.875rem;color:#111827"><%= row.value %></span>
          <% } %>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table>
</div>
<% }) %>
