jukka/intra.noxus.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Siirrä Ohjeet, Laitetilat ja Arkisto alinaveihin

Browse Source 
- Ohjeet → Asiakaspalvelu-tabin alle sub-tabiksi
- Laitetilat → Tekniikka-tabin alle sub-tabiksi
- Arkisto → Asiakkaat-tabin alle sub-tabiksi
- Päivitä hash-reititys ja vanhojen linkkien yhteensopivuus
- Lisää switchSupportSubTab() ja switchCustomerSubTab()
- Siivoa debug-logitukset laitetila-poistosta

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-12 09:24:16 +02:00
parent 5a796d8b13
commit de384b5cb9
2 changed files with 286 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
index.html
View File

@@ -83,16 +83,18 @@
<button class="tab" data-tab="leads">Liidit</button>
<button class="tab" data-tab="tekniikka">Tekniikka</button>
<button class="tab" data-tab="documents">Dokumentit</button>
<button class="tab" data-tab="laitetilat">Laitetilat</button>
<button class="tab" data-tab="netadmin">NetAdmin</button>
<button class="tab" data-tab="ohjeet">Ohjeet</button>
<button class="tab" data-tab="archive">Arkisto</button>
<button class="tab" data-tab="changelog">Muutosloki</button>
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
</div>
<!-- Tab: Asiakkaat -->
<div class="tab-content active" id="tab-content-customers">
<div class="sub-tab-bar" id="customers-sub-tab-bar">
<button class="sub-tab active" data-cust-subtab="customers-list">Asiakkaat</button>
<button class="sub-tab" data-cust-subtab="customers-archive">Arkisto</button>
</div>
<div id="subtab-customers-list" class="sub-tab-content active">
<div class="main-container">
<div class="content-layout">
<div class="content-main">
@@ -161,6 +163,31 @@
</aside>
</div>
</div>
</div><!-- /subtab-customers-list -->
<!-- Sub-tab: Arkisto -->
<div id="subtab-customers-archive" class="sub-tab-content">
<div class="main-container">
<div class="table-card">
<table id="archive-table">
<thead>
<tr>
<th>Yritys</th>
<th>Liittymiä</th>
<th>Arkistoitu</th>
<th>Arkistoija</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="archive-tbody"></tbody>
</table>
<div id="no-archive" class="empty-state" style="display:none">
<div class="empty-icon">&#128451;</div>
<p>Arkisto on tyhjä.</p>
</div>
</div>
</div>
</div><!-- /subtab-customers-archive -->
</div>
<!-- Tab: Liidit -->
@@ -204,6 +231,7 @@
<div class="sub-tab-bar">
<button class="sub-tab active" data-subtab="devices">Laitteet</button>
<button class="sub-tab" data-subtab="ipam">IPAM</button>
<button class="sub-tab" data-subtab="laitetilat">Laitetilat</button>
</div>
<!-- Sub-tab: Laitteet -->
@@ -298,109 +326,91 @@
</div>
</div>
</div>
</div>
<!-- Tab: Ohjeet -->
<div class="tab-content" id="tab-content-ohjeet">
<div class="main-container">
<!-- Listanäkymä -->
<div id="guides-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
<div class="search-bar" style="flex:1;max-width:400px;">
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
<!-- Sub-tab: Laitetilat -->
<div class="sub-tab-content" id="subtab-laitetilat">
<div class="main-container">
<!-- Listanäkymä -->
<div id="laitetilat-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">🏢 Laitetilat</h3>
<button class="btn-primary" id="btn-new-laitetila">+ Uusi laitetila</button>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki kategoriat</option>
</select>
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button>
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">&#9881; Kategoriat</button>
<div id="laitetilat-grid" class="laitetilat-grid"></div>
<div id="no-laitetilat" class="empty-state" style="display:none;">
<div class="empty-icon">🏢</div>
<p>Ei laitetiloja vielä.</p>
<p class="empty-hint">Klikkaa "+ Uusi laitetila" aloittaaksesi.</p>
</div>
</div>
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
<div id="no-guides" class="empty-state" style="display:none;">
<p>Ei ohjeita vielä.</p>
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="guide-read-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-back">&larr; Takaisin</button>
</div>
<div class="table-card" style="padding:2rem 2.5rem;">
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;">
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1>
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
<!-- Lukunäkymä -->
<div id="laitetila-read-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-laitetila-back">← Takaisin</button>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-laitetila-edit">✏️ Muokkaa</button>
<button class="btn-danger" id="btn-laitetila-delete" style="display:none;">🗑 Poista</button>
</div>
</div>
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div>
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div>
<div id="guide-read-actions" style="margin-top:1rem;display:none;">
<button class="btn-secondary" id="btn-edit-guide">&#9998; Muokkaa</button>
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">&#128465; Poista</button>
<div class="table-card" style="padding:1.5rem;">
<h2 id="laitetila-read-nimi" style="margin:0 0 0.25rem;color:var(--primary-dark);"></h2>
<p id="laitetila-read-osoite" style="color:#888;font-size:0.9rem;margin-bottom:1rem;"></p>
<p id="laitetila-read-kuvaus" style="color:#555;margin-bottom:1.5rem;white-space:pre-wrap;"></p>
<div style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lisää tiedosto</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="laitetila-file-input" multiple style="flex:1;min-width:200px;">
<input type="text" id="laitetila-file-desc" placeholder="Kuvaus (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-laitetila-upload">Lataa</button>
</div>
</div>
<div id="laitetila-gallery" style="display:none;margin-bottom:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Kuvat</h4>
<div id="laitetila-gallery-grid" class="gallery-grid"></div>
</div>
<div id="laitetila-files-section" style="display:none;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Tiedostot</h4>
<div id="laitetila-files-list"></div>
</div>
<div id="laitetila-devices-section" style="margin-top:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">🖥 Laitteet</h4>
<div id="laitetila-devices-list"></div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="laitetila-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-laitetila-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="laitetila-edit-title">Uusi laitetila</h3>
<form id="laitetila-edit-form">
<input type="hidden" id="laitetila-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Nimi *</label>
<input type="text" id="laitetila-edit-nimi" required placeholder="Esim. Keskuskatu 5 - Kellari">
</div>
<div class="form-group">
<label>Osoite</label>
<input type="text" id="laitetila-edit-osoite" placeholder="Katuosoite">
</div>
<div class="form-group full-width">
<label>Kuvaus</label>
<textarea id="laitetila-edit-kuvaus" rows="4" placeholder="Laitetilan kuvaus..."></textarea>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-laitetila-edit-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="guide-edit-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-edit-cancel">&larr; Peruuta</button>
</div>
<div class="table-card" style="padding:1.5rem 2rem;">
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
<form id="guide-form">
<input type="hidden" id="guide-form-id">
<div class="form-group" style="margin-bottom:1rem;">
<label for="guide-form-title">Otsikko *</label>
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="guide-form-category">Kategoria</label>
<select id="guide-form-category">
<option value="">Ei kategoriaa</option>
</select>
</div>
<div class="form-group">
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
</div>
</div>
<div class="form-group" style="margin-bottom:0.5rem;">
<label>Sisältö (Markdown)</label>
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">&#8226; Lista</button>
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">&#128279;</button>
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi">&lt;/&gt;</button>
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">&#10077;</button>
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">&#128247; Kuva</button>
<input type="file" id="guide-image-input" accept="image/*" style="display:none;">
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
</label>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
@@ -674,30 +684,6 @@
</div>
</div>
<!-- Tab: Arkisto -->
<div class="tab-content" id="tab-content-archive">
<div class="main-container">
<div class="table-card">
<table id="archive-table">
<thead>
<tr>
<th>Yritys</th>
<th>Liittymiä</th>
<th>Arkistoitu</th>
<th>Arkistoija</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="archive-tbody"></tbody>
</table>
<div id="no-archive" class="empty-state" style="display:none">
<div class="empty-icon">&#128451;</div>
<p>Arkisto on tyhjä.</p>
</div>
</div>
</div>
</div>
<!-- Tab: Dokumentit -->
<div class="tab-content" id="tab-content-documents">
<div class="sub-tab-bar" id="doc-sub-tab-bar">
@@ -901,100 +887,6 @@
</div>
</div>
<!-- Tab: Laitetilat -->
<div class="tab-content" id="tab-content-laitetilat">
<div class="main-container">
<!-- Listanäkymä -->
<div id="laitetilat-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">🏢 Laitetilat</h3>
<button class="btn-primary" id="btn-new-laitetila">+ Uusi laitetila</button>
</div>
<div id="laitetilat-grid" class="laitetilat-grid"></div>
<div id="no-laitetilat" class="empty-state" style="display:none;">
<div class="empty-icon">🏢</div>
<p>Ei laitetiloja vielä.</p>
<p class="empty-hint">Klikkaa "+ Uusi laitetila" aloittaaksesi.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="laitetila-read-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-laitetila-back">← Takaisin</button>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-laitetila-edit">✏️ Muokkaa</button>
<button class="btn-danger" id="btn-laitetila-delete" style="display:none;">🗑 Poista</button>
</div>
</div>
<div class="table-card" style="padding:1.5rem;">
<h2 id="laitetila-read-nimi" style="margin:0 0 0.25rem;color:var(--primary-dark);"></h2>
<p id="laitetila-read-osoite" style="color:#888;font-size:0.9rem;margin-bottom:1rem;"></p>
<p id="laitetila-read-kuvaus" style="color:#555;margin-bottom:1.5rem;white-space:pre-wrap;"></p>
<!-- Tiedostojen lataus -->
<div style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lisää tiedosto</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="laitetila-file-input" multiple style="flex:1;min-width:200px;">
<input type="text" id="laitetila-file-desc" placeholder="Kuvaus (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-laitetila-upload">Lataa</button>
</div>
</div>
<!-- Kuvagalleria -->
<div id="laitetila-gallery" style="display:none;margin-bottom:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Kuvat</h4>
<div id="laitetila-gallery-grid" class="gallery-grid"></div>
</div>
<!-- Muut tiedostot -->
<div id="laitetila-files-section" style="display:none;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Tiedostot</h4>
<div id="laitetila-files-list"></div>
</div>
<!-- Laitteet tässä tilassa -->
<div id="laitetila-devices-section" style="margin-top:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">🖥 Laitteet</h4>
<div id="laitetila-devices-list"></div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="laitetila-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-laitetila-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="laitetila-edit-title">Uusi laitetila</h3>
<form id="laitetila-edit-form">
<input type="hidden" id="laitetila-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Nimi *</label>
<input type="text" id="laitetila-edit-nimi" required placeholder="Esim. Keskuskatu 5 - Kellari">
</div>
<div class="form-group">
<label>Osoite</label>
<input type="text" id="laitetila-edit-osoite" placeholder="Katuosoite">
</div>
<div class="form-group full-width">
<label>Kuvaus</label>
<textarea id="laitetila-edit-kuvaus" rows="4" placeholder="Laitetilan kuvaus..."></textarea>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-laitetila-edit-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Tab: NetAdmin -->
<div class="tab-content" id="tab-content-netadmin">
<div class="main-container">
@@ -1145,6 +1037,11 @@
<!-- Tab: Asiakaspalvelu -->
<div class="tab-content" id="tab-content-support">
<div class="sub-tab-bar" id="support-sub-tab-bar">
<button class="sub-tab active" data-support-subtab="support-tickets">Tiketit</button>
<button class="sub-tab" data-support-subtab="support-ohjeet">Ohjeet</button>
</div>
<div id="subtab-support-tickets" class="sub-tab-content active">
<div class="main-container">
<!-- Listanäkymä -->
<div id="ticket-list-view">
@@ -1397,6 +1294,111 @@
</div>
</div>
</div><!-- /subtab-support-tickets -->
<!-- Sub-tab: Ohjeet -->
<div id="subtab-support-ohjeet" class="sub-tab-content">
<div class="main-container">
<!-- Listanäkymä -->
<div id="guides-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
<div class="search-bar" style="flex:1;max-width:400px;">
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki kategoriat</option>
</select>
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button>
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">&#9881; Kategoriat</button>
</div>
</div>
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
<div id="no-guides" class="empty-state" style="display:none;">
<p>Ei ohjeita vielä.</p>
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="guide-read-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-back">&larr; Takaisin</button>
</div>
<div class="table-card" style="padding:2rem 2.5rem;">
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;">
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1>
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
</div>
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div>
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div>
<div id="guide-read-actions" style="margin-top:1rem;display:none;">
<button class="btn-secondary" id="btn-edit-guide">&#9998; Muokkaa</button>
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">&#128465; Poista</button>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="guide-edit-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-edit-cancel">&larr; Peruuta</button>
</div>
<div class="table-card" style="padding:1.5rem 2rem;">
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
<form id="guide-form">
<input type="hidden" id="guide-form-id">
<div class="form-group" style="margin-bottom:1rem;">
<label for="guide-form-title">Otsikko *</label>
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="guide-form-category">Kategoria</label>
<select id="guide-form-category">
<option value="">Ei kategoriaa</option>
</select>
</div>
<div class="form-group">
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
</div>
</div>
<div class="form-group" style="margin-bottom:0.5rem;">
<label>Sisältö (Markdown)</label>
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">&#8226; Lista</button>
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">&#128279;</button>
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi">&lt;/&gt;</button>
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">&#10077;</button>
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">&#128247; Kuva</button>
<input type="file" id="guide-image-input" accept="image/*" style="display:none;">
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
</label>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- /subtab-support-ohjeet -->
</div>
<!-- Tab: Käyttäjät (vain admin) -->