{{define "content"}}
    <style>
        .builder-layout { display: flex; gap: 20px; align-items: stretch; margin-top: 20px; }
        .builder-lhs { flex: 1.5; display: flex; flex-direction: column; overflow: hidden; }
        .builder-rhs { flex: 1; display: flex; flex-direction: column; }

        .builder-group { margin-bottom: 15px; }
        .builder-label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
        .builder-input, .builder-select {
            width: 100%; padding: 10px; border: 1px solid var(--border);
            border-radius: 4px; font-family: inherit; box-sizing: border-box;
            background: var(--card-bg); color: var(--text-main);
        }
        .builder-input:focus, .builder-select:focus { outline: none; border-color: var(--primary); }

        .mapping-table td { vertical-align: middle; }
    </style>

    <div class="container">
        <header style="padding: 0; box-shadow: none; border: none; margin-bottom: 10px; background: transparent;">
            <h2>🔧 Adapter Builder: <span style="color: var(--text-muted); font-weight: normal;">{{.Filename}}</span></h2>
        </header>

        <div class="builder-layout">
            <div class="card builder-lhs" style="padding: 0;">
                <div class="toolbar">
                    <h3 style="font-size: 1.1rem; margin: 0;">1. Data Preview</h3>
                    <label for="local-file" class="btn btn-secondary" style="margin: 0;">
                        Load {{.Filename}}
                    </label>
                    <input type="file" id="local-file" accept=".csv,.json" style="display: none;">
                </div>
                <div class="scroll-container" style="padding: 20px; overflow-x: auto; max-height: 65vh; overflow-y: auto;">
                    <div id="preview-placeholder" style="text-align: center; color: var(--text-muted); margin-top: 40px;">
                        <p>Click "Load" to generate a data preview and extract column headers.</p>
                    </div>
                    <div id="preview-table-container"></div>
                </div>
            </div>

            <div class="card builder-rhs">
                <h3 style="font-size: 1.1rem; margin-top: 0; margin-bottom: 20px; color: var(--primary);">2. Schema Mapping</h3>

                <form id="adapter-form" style="display: flex; flex-direction: column; height: 100%;">
                    <div style="display: flex; gap: 15px;">
                        <div class="builder-group" style="flex: 1;">
                            <label class="builder-label">Adapter Name</label>
                            <input type="text" id="name" class="builder-input" placeholder="e.g. AcmeScan" required>
                        </div>
                        <div class="builder-group" style="flex: 1;">
                            <label class="builder-label">Source Name</label>
                            <input type="text" id="source_name" class="builder-input" placeholder="e.g. Acme" required>
                        </div>
                    </div>

                    <div class="builder-group">
                        <label class="builder-label">Findings JSON Path <span style="font-weight: normal; font-size: 0.8rem;">('.' for CSV, 'data.alerts' for JSON)</span></label>
                        <input type="text" id="findings_path" class="builder-input" value="." required>
                    </div>

                    <hr style="border: 0; border-top: 1px solid var(--border); margin: 20px 0;">
                    <h4 style="margin-bottom: 15px; font-size: 1rem;">Map to Core Fields</h4>

                    <table class="mapping-table" style="margin-top: 0;">
                        <tbody>
                        <tr>
                            <td width="35%"><strong>Title <span style="color: var(--critical);">*</span></strong></td>
                            <td><select id="mapping_title" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
                        </tr>
                        <tr>
                            <td><strong>Asset <span style="color: var(--critical);">*</span></strong></td>
                            <td><select id="mapping_asset" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
                        </tr>
                        <tr>
                            <td><strong>Severity <span style="color: var(--critical);">*</span></strong></td>
                            <td><select id="mapping_severity" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
                        </tr>
                        <tr>
                            <td><strong>Description</strong></td>
                            <td><select id="mapping_description" class="builder-select source-header"><option value="">-- Optional --</option></select></td>
                        </tr>
                        <tr>
                            <td><strong>Remediation</strong></td>
                            <td><select id="mapping_remediation" class="builder-select source-header"><option value="">-- Optional --</option></select></td>
                        </tr>
                        </tbody>
                    </table>

                    <div style="margin-top: auto; padding-top: 20px;">
                        <button type="submit" class="btn disabled" id="save-btn" style="width: 100%; background: var(--primary); color: white; border: none; padding: 12px;">Save & Enable Adapter</button>
                    </div>
                    <div style="display: flex; gap: 15px; margin-top: 20px;">
                        <button class="btn" style="background: #2563eb; color: white;" onclick="saveAdapter()">💾 Save to Database</button>
                        <button class="btn btn-secondary" onclick="exportAdapterJSON()">⬇️ Export JSON Profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="/static/builder.js"></script>
{{end}}