export function buildStructuralSidebar(modeTitle, sInfo, esc) {
    return `
        <div class="former-sidebar-header">
            <h3>${modeTitle}</h3>
            <button class="btn btn-sm" onclick="navigate(state.project ? 'dashboard' : 'landing')">Close</button>
        </div>
        <div style="padding:12px 16px">
            <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px">
                ${sInfo?.svgPath ? esc(sInfo.svgPath.split('/').pop()) : 'No SVG'} |
                ${sInfo?.svgWidth?.toFixed(1) || '?'} × ${sInfo?.svgHeight?.toFixed(1) || '?'} mm
            </div>
            <div class="form-row" style="margin:4px 0">
                <span class="form-label" style="font-size:11px;min-width:70px">Pattern</span>
                <select class="form-input" id="sf-pattern" style="font-size:11px" onchange="updateStructuralLive()">
                    ${['hexagon','triangle','diamond','voronoi','grid','gyroid'].map(p =>
                        `<option value="${p}" ${p === sInfo?.pattern ? 'selected' : ''}>${p}</option>`
                    ).join('')}
                </select>
            </div>
            <div class="form-row" style="margin:4px 0">
                <span class="form-label" style="font-size:11px;min-width:70px">Cell (mm)</span>
                <input class="form-input" id="sf-cell" type="number" step="0.5" value="${sInfo?.cellSize || 10}" style="font-size:11px" onchange="updateStructuralLive()">
            </div>
            <div class="form-row" style="margin:4px 0">
                <span class="form-label" style="font-size:11px;min-width:70px">Wall (mm)</span>
                <input class="form-input" id="sf-wall" type="number" step="0.1" value="${sInfo?.wallThick || 1.2}" style="font-size:11px" onchange="updateStructuralLive()">
            </div>
            <div class="form-row" style="margin:4px 0">
                <span class="form-label" style="font-size:11px;min-width:70px">Height (mm)</span>
                <input class="form-input" id="sf-height" type="number" step="1" value="${sInfo?.height || 20}" style="font-size:11px" onchange="updateStructuralLive()">
            </div>
            <div style="margin-top:8px">
                <button class="btn btn-sm btn-primary" onclick="renderStructuralPreview()" style="width:100%">Render Preview</button>
            </div>
        </div>
        <div id="former-render-result" style="display:none;padding:8px 16px;border-top:1px solid var(--border-light);background:rgba(166,227,161,0.08)">
            <div style="font-size:12px;color:var(--success);margin-bottom:4px;font-weight:600">Render Complete</div>
            <div id="former-render-files" style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-family:var(--font-mono);line-height:1.5"></div>
            <div style="display:flex;gap:4px">
                <button class="btn btn-sm" onclick="formerReturnToEditor()" style="flex:1">Return to Editor</button>
                <button class="btn btn-sm" onclick="openOutputFolder()" style="flex:1;border-color:var(--accent);color:var(--accent)">Open Folder</button>
            </div>
        </div>
    `;
}