<div class="page-content" id="page-calc-builder">
<div class="config-builder-shell">
<div class="config-builder-header">
<div>
<h1 class="page-title">CalcBuilder</h1>
<p class="page-subtitle">Skapa en konfigurator, koppla den till en kategori och bygg upp blocken som ska driva kalkylmotorn.</p>
</div>
<div class="page-file-strip">
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.php" target="_blank" rel="noreferrer">CalcBuilder.php <span class="page-file-code">DEV-0DF17B17</span></a>
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.js" target="_blank" rel="noreferrer">CalcBuilder.js <span class="page-file-code">DEV-8F9E6D20</span></a>
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.css" target="_blank" rel="noreferrer">CalcBuilder.css <span class="page-file-code">DEV-2E948F21</span></a>
<a class="page-file-pill" href="/maps/view.php?file=api/calc_builder.php" target="_blank" rel="noreferrer">calc_builder.php <span class="page-file-code">DEV-A2271AC5</span></a>
</div>
</div>
<div class="config-builder-layout">
<aside class="config-builder-sidebar">
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Konfiguratorer</h3>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.createNew()">+ Ny</button>
</div>
<input id="calcBuilderSearch" class="config-builder-input" type="text" placeholder="Sök kategori eller namn..." oninput="CalcBuilder.renderList()">
<div id="calcBuilderList" class="config-builder-list"></div>
</div>
</aside>
<section class="config-builder-main">
<div class="config-builder-panel config-builder-mode-panel">
<div class="config-builder-mode-tabs" role="tablist">
<button type="button" class="config-builder-mode-tab is-active" data-mode="simple" onclick="CalcBuilder.setMode('simple')">Enkel</button>
<button type="button" class="config-builder-mode-tab" data-mode="advanced" onclick="CalcBuilder.setMode('advanced')">Avancerad</button>
<button type="button" class="config-builder-mode-tab" data-mode="code" onclick="CalcBuilder.setMode('code')">Code</button>
</div>
<p class="config-builder-mode-help" id="calcBuilderModeHelp">Enkel kalkylator använder produktkatalogens färdiga upplägg.</p>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Grundinfo</h3>
<div class="config-builder-actions">
<button type="button" class="config-builder-btn config-builder-advanced-only" onclick="CalcBuilder.duplicateLastBlock()">Duplicera block</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.openPreview()">Öppna sida</button>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.saveCurrent()">Spara konfigurator</button>
</div>
</div>
<div class="config-builder-grid">
<label>
<span>Namn</span>
<input id="calcBuilderTitle" class="config-builder-input" type="text" placeholder="T.ex. Solpaneler standard">
</label>
<label>
<span>Kategori</span>
<select id="calcBuilderCategory" class="config-builder-input"></select>
</label>
<label>
<span>Version</span>
<input id="calcBuilderVersion" class="config-builder-input" type="text" value="1.0.0">
</label>
<label>
<span>Intern notis</span>
<input id="calcBuilderNotes" class="config-builder-input" type="text" placeholder="När denna används">
</label>
</div>
<div id="calcBuilderStatus" class="config-builder-status"></div>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Layout</h3>
</div>
<p class="config-builder-help">Välj befintlig head, var prissammanställningen ska ligga och vilken footer som används. Dessa inställningar gäller i alla lägen.</p>
<input type="hidden" id="calcBuilderMode" value="simple">
<div class="config-builder-grid">
<label>
<span>Head</span>
<select id="calcBuilderHeadPreset" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="current-default">Nuvarande head</option>
<option value="none">Ingen head</option>
</select>
</label>
<label>
<span>Sidebar sida</span>
<select id="calcBuilderSidebarPosition" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="right">Höger</option>
<option value="left">Vänster</option>
</select>
</label>
<label>
<span>Sidebar innehåll</span>
<select id="calcBuilderSidebarModule" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="price-summary">Prissammanställning</option>
<option value="none">Ingen sidebar</option>
</select>
</label>
<label>
<span>Footer</span>
<select id="calcBuilderFooterMode" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="none">Ingen footer</option>
<option value="default">Standard footer</option>
</select>
</label>
</div>
</div>
<div id="calcBuilderAdvancedWrap" class="config-builder-editor-grid">
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Avancerade block</h3>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.addBlock()">+ Lägg till block</button>
</div>
<p class="config-builder-help">Använd bara detta när kategorin behöver en egen blockdriven kalkylator. Enkel kalkylator använder produktkatalogens upplägg.</p>
<div id="calcBuilderBlocks" class="config-builder-blocks"></div>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Förhandsvisning</h3>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshPreview()">Uppdatera</button>
</div>
<div id="calcBuilderPreview" class="config-builder-preview"></div>
</div>
</div>
<div id="calcBuilderCodeWrap" class="config-builder-code-wrap is-hidden">
<div class="config-builder-panel config-builder-code-editor-panel">
<div class="config-builder-panel-head">
<h3>Kod (content)</h3>
<div class="config-builder-actions">
<button type="button" class="config-builder-btn" onclick="CalcBuilder.insertCodeSnippet('window')">+ Fönster-snippet</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.insertCodeSnippet('door')">+ Dörr-snippet</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshCodePreview()">Uppdatera preview</button>
</div>
</div>
<p class="config-builder-help">Skriv eller klistra in HTML/JS som utgör content-regionen. Tillgängliga variabler: <code>{{category}}</code>, <code>{{title}}</code>, <code>{{version}}</code>. Head/sidebar/footer styrs från Layout-panelen ovan.</p>
<textarea id="calcBuilderCode" class="config-builder-code-editor" spellcheck="false" oninput="CalcBuilder.onCodeInput()" placeholder="<div class="my-config">...</div>"></textarea>
</div>
<div class="config-builder-panel config-builder-code-preview-panel">
<div class="config-builder-panel-head">
<h3>Live-preview</h3>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshCodePreview()">Uppdatera</button>
</div>
<div id="calcBuilderCodePreview" class="config-builder-code-preview"></div>
</div>
</div>
</section>
</div>
</div>
</div>