<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">
<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>Snabbbygge</h3>
</div>
<p class="config-builder-help">Välj befintlig head, var prissammanställningen ska ligga och om den här kategorin ska använda enkel eller avancerad kalkylator.</p>
<div class="config-builder-grid">
<label>
<span>Kalkylator</span>
<select id="calcBuilderMode" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="simple">Enkel</option>
<option value="advanced">Avancerad</option>
</select>
</label>
<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>
</section>
</div>
</div>
</div>