<?php // pages/productlist.php — produktlista (tidigare produkter.php, döpt om 2026-04-22) ?>
<div class="page-content" id="page-produkter">
<h1 class="page-title">Produktkatalog</h1>
<p class="page-subtitle">Utforska vårt sortiment av produkter</p>
<div class="page-file-strip">
<a class="page-file-pill" href="/maps/view.php?file=pages/productlist.php" target="_blank" rel="noreferrer">productlist.php <span class="page-file-code">DEV-0DB99B18</span></a>
<a class="page-file-pill" href="/maps/view.php?file=js/productlist.js" target="_blank" rel="noreferrer">productlist.js <span class="page-file-code">DEV-E7734603</span></a>
<a class="page-file-pill" href="/maps/view.php?file=css/productlist.css" target="_blank" rel="noreferrer">productlist.css <span class="page-file-code">DEV-4059252E</span></a>
</div>
<div class="catalog-header">
<label class="config-label">Kategori:</label>
<select class="product-select" id="catalogCatSelect" onchange="filterCatalog()" style="min-width:200px">
<option value="">Alla produkter</option>
<option value="solceller">Solceller</option>
<optgroup label="Batteri">
<option value="g:batteri">Batteri (alla)</option>
<option value="batteri">Batterier</option>
<option value="batteri_utbyggnad">Utbyggnad</option>
</optgroup>
<option value="laddbox">Laddbox</option>
<option value="fonster">Fönster</option>
<option value="dorrar">Dörrar</option>
<option value="tak">Tak</option>
<option value="varmepump">Värmepump</option>
<option value="taktvatt">Taktvätt</option>
<option value="isolering">Isolering</option>
<option value="tjanster">Tjänster</option>
<option value="tillbehor">Tillbehör</option>
</select>
<div style="flex:1"></div>
<div style="position:relative;margin-right:12px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:#94a3b8;fill:none;stroke-width:2;position:absolute;left:10px;top:50%;transform:translateY(-50%)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input id="catalogSearch" type="text" placeholder="Sök produkt..." oninput="filterCatalog()" autocomplete="off" style="padding:8px 12px 8px 32px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;width:200px;outline:none;transition:border-color .15s" onfocus="this.style.borderColor='#024550'" onblur="this.style.borderColor='#e5e7eb'"></div>
<span id="catalogCount" style="font-size:13px;color:#94a3b8;margin-right:12px"></span>
<div style="display:flex;gap:4px;margin-right:8px">
<button id="catViewGrid" onclick="setCatalogView('grid')" style="padding:6px 8px;border:1px solid #e5e7eb;border-radius:6px;background:#024550;color:#fff;cursor:pointer" title="Rutnät"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></button>
<button id="catViewList" onclick="setCatalogView('list')" style="padding:6px 8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#64748b;cursor:pointer" title="Lista"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></button>
</div>
<button onclick="showAddProductModal()" style="padding:8px 16px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Ny produkt</button>
<button onclick="showCategoryEditor()" style="padding:8px 16px;background:#f59e0b;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;margin-left:6px">Kategorier</button>
</div>
<div class="catalog-grid" id="catalogGrid"></div>
</div>
<!-- KONFIGURATOR -->