{{define "admin_config"}}
    <div id="tab-config" class="tab-pane">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h3 style="margin: 0;">🤠 Personnel</h3>
                    <button id="openUserModal" class="btn" style="padding: 6px 12px; font-size: 0.85rem;">+ Add User</button>
                </div>
                <table style="font-size: 0.9rem; width: 100%;">
                    <thead><tr><th style="text-align: left;">Name</th><th style="text-align: left;">Role</th><th style="text-align: right;">Actions</th></tr></thead>
                    <tbody>
                    {{range .Users}}
                        <tr style="border-bottom: 1px solid #f1f5f9;">
                            <td style="padding: 8px 0;"><strong>{{.FullName}}</strong><br><span style="font-family: monospace; font-size: 0.8rem; color: #64748b;">{{.Email}}</span></td>
                            <td><span class="badge" style="background: #1e293b;">{{.GlobalRole}}</span></td>
                            <td style="text-align: right;">
                                <button class="btn btn-secondary" style="padding: 2px 6px; font-size: 0.75rem;" onclick="resetPassword({{.ID}})" title="Reset Password">🔑</button>
                                <button class="btn btn-secondary" style="padding: 2px 6px; font-size: 0.75rem;" onclick="editRole({{.ID}}, '{{.GlobalRole}}')" title="Change Role">🛡️</button>
                                <button class="btn btn-secondary" style="padding: 2px 6px; font-size: 0.75rem; color: #dc2626; border-color: #fca5a5;" onclick="deleteUser({{.ID}})" title="Deactivate">🗑️</button>
                            </td>
                        </tr>
                    {{end}}
                    </tbody>
                </table>
            </div>

            {{block "pro_source_routing" .}}
                <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; background: #f8fafc;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <h3 style="margin: 0; color: #64748b;">🛤️ Source Routing</h3>
                        <button class="btn" disabled style="padding: 6px 12px; font-size: 0.85rem; background: #cbd5e1; color: white; cursor: not-allowed;">🔒 Pro Feature</button>
                    </div>
                    <div style="text-align: center; padding: 20px; border: 1px dashed #cbd5e1; border-radius: 6px; background: white;">
                        <p style="color: #475569; font-size: 0.9rem; margin-bottom: 10px;">Automate ticket assignment and triage based on asset tags or CVEs.</p>
                        <a href="https://RiskRancher.com/pro" target="_blank" style="color: #8b5cf6; text-decoration: none; font-weight: bold; font-size: 0.85rem;">Learn about RiskRancher Pro &rarr;</a>
                    </div>
                </div>
            {{end}}
        </div>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">

            {{block "pro_sla_policy" .}}
                <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; position: relative;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <div>
                            <h3 style="margin: 0;">⏱️ SLA Policies & System Time</h3>
                            <p style="margin: 2px 0 0 0; font-size: 0.8rem; color: #64748b;">Locked to Standard FedRAMP/NIST Default Timeframes</p>
                        </div>
                        <button class="btn" style="padding: 6px 12px; font-size: 0.85rem; background: #f8fafc; color: #64748b; border: 1px solid #cbd5e1;" onclick="showUpsell('Custom SLA Timers & Business Hours')">🔒 Customize (Pro)</button>
                    </div>
                    <div style="display: flex; gap: 30px; opacity: 0.7; pointer-events: none;">
                        <div style="flex: 1; padding: 15px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
                            <h4 style="margin-top: 0;">Base Configuration</h4>
                            <label>System Timezone:</label>
                            <select disabled style="width: 100%; padding: 6px; margin-bottom: 10px; background: #e2e8f0;">
                                <option selected>UTC (Universal)</option>
                            </select>
                            <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                                <div style="flex: 1;"><label>Biz Start:</label><input type="text" disabled value="09:00" style="width: 100%; padding: 6px; background: #e2e8f0;"></div>
                                <div style="flex: 1;"><label>Biz End:</label><input type="text" disabled value="17:00" style="width: 100%; padding: 6px; background: #e2e8f0;"></div>
                            </div>
                        </div>
                        <div style="flex: 2;">
                            <div style="margin-bottom: 10px; display: flex; justify-content: space-between;">
                                <h4 style="margin: 0;">SLA Matrix (Days to Patch)</h4>
                            </div>
                            <table style="font-size: 0.85rem; width: 100%; text-align: left;">
                                <thead><tr><th style="padding-bottom: 5px;">Severity</th><th>Triage</th><th>Patch</th></tr></thead>
                                <tbody>
                                <tr class="sla-row"><td style="padding: 4px 0;"><span class="badge critical">Critical</span></td><td>1</td><td>3</td></tr>
                                <tr class="sla-row"><td style="padding: 4px 0;"><span class="badge high">High</span></td><td>3</td><td>14</td></tr>
                                <tr class="sla-row"><td style="padding: 4px 0;"><span class="badge medium">Medium</span></td><td>7</td><td>30</td></tr>
                                <tr class="sla-row"><td style="padding: 4px 0;"><span class="badge low">Low</span></td><td>14</td><td>90</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {{end}}

            <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; display: flex; flex-direction: column;">
                <h3 style="margin: 0 0 15px 0;">⚙️ Operations</h3>

                {{block "pro_backups" .}}
                {{end}}

                <div style="margin-bottom: 20px;">
                    <label style="font-weight: bold;">Data Portability</label>
                    <a href="/api/admin/export" class="btn btn-secondary" style="display: block; text-align: center; margin-top: 5px; background: #e0e7ff; color: #3730a3; border-color: #c7d2fe;">⬇️ Export JSON State</a>
                </div>

                <div style="margin-top: auto; padding-top: 15px; border-top: 1px solid #e2e8f0;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-size: 0.85rem; color: #475569;">Core Engine: <strong>{{.Version}} ({{.Commit}})</strong></span>
                        <button class="btn" style="padding: 4px 10px; font-size: 0.8rem; color: white; background: #0f172a;" onclick="checkUpdates()">Updates</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{end}}