// webtool.js
tol = `
    <div id="mode-toggle">
        <i class="fa-solid fa-eye" title="Mode Lihat"></i>
        <i class="fa-solid fa-pencil" title="Mode Edit" style="display: none;"></i>
    </div>

    <div id="print-button-container"> <button id="print-button" title="Cetak Halaman" class="ve-hidden"><i class="fa-solid fa-print"></i></button>
    </div>


    <div id="toolbox" class="ve-floating-window ve-hidden" style="top: 80px; left: 20px;">
        <div class="ve-window-header">
            <i class="fa-solid fa-toolbox"></i> Toolbox
        </div>
        <div class="ve-window-content">
            <button data-type="p" title="Tambah Paragraf"><i class="fa-solid fa-paragraph"></i></button>
            <button data-type="h1" title="Tambah Judul H1"><i class="fa-solid fa-heading"></i> H1</button>
            <button data-type="h2" title="Tambah Judul H2"><i class="fa-solid fa-heading"></i> H2</button>
            <button data-type="h3" title="Tambah Judul H3"><i class="fa-solid fa-heading"></i> H3</button>
            <button data-type="button" title="Tambah Tombol"><i class="fa-solid fa-hand-pointer"></i></button>
            <button data-type="img" title="Tambah Gambar"><i class="fa-solid fa-image"></i></button>
            <button data-type="div" title="Tambah Kotak (Div)"><i class="fa-solid fa-box"></i></button>
            <button data-type="a" title="Tambah Link"><i class="fa-solid fa-link"></i></button>
            <button data-type="input" title="Tambah Input"><i class="fa-solid fa-keyboard"></i></button>
            <button data-type="label" title="Tambah Label"><i class="fa-solid fa-tag"></i></button>
            <button data-type="vue-component" title="Tambah Komponen Vue"><i class="fa-brands fa-vuejs"></i> Vue Comp</button> </div>
    </div>

    <div id="properties-panel" class="ve-floating-window ve-hidden" style="top: 80px; right: 20px;">
        <div class="ve-window-header">
            <i class="fa-solid fa-sliders"></i> Properti Elemen
        </div>

        <div id="selected-info">
            ID: <span id="selected-element-id">Tidak ada</span>
        </div>

        <div class="ve-panel-actions">
            <button id="save-button" title="Simpan Perubahan"><i class="fa-solid fa-save"></i> Simpan</button>
            <button id="export-button" title="Ekspor ke HTML"><i class="fa-solid fa-download"></i> Ekspor</button>
            <button id="reset-button" title="Reset Semua Pengaturan"><i class="fa-solid fa-undo"></i> Reset</button>
            <button id="delete-button" title="Hapus Elemen Terpilih"><i class="fa-solid fa-trash"></i> Hapus</button>
        </div>

        <div class="ve-tab-buttons">
            <button class="ve-tab-button ve-active" data-tab="tab-content-props">Konten</button>
            <button class="ve-tab-button" data-tab="tab-layout">Layout</button>
            <button class="ve-tab-button" data-tab="tab-typography">Tipografi</button>
            <button class="ve-tab-button" data-tab="tab-background">Latar</button>
            <button class="ve-tab-button" data-tab="tab-border">Border</button>
            <button class="ve-tab-button" data-tab="tab-effects">Efek</button>
            <button class="ve-tab-button" data-tab="tab-methods">Method</button>
            <button class="ve-tab-button" data-tab="tab-vue-props">Vue Props</button> </div>

        <div class="ve-tab-content">
            <div id="tab-content-props" class="ve-tab-pane ve-active">
                <fieldset>
                    <legend>Isi / Nilai</legend>
                    <div class="ve-prop-group" data-for-tag="H1 H2 H3 P BUTTON A DIV LABEL">
                        <label>Teks / HTML:</label>
                        <textarea data-prop="innerHTML" rows="4"></textarea>
                    </div>
                    <div class="ve-prop-group" data-for-tag="IMG">
                        <label>URL Gambar (src):</label>
                        <input type="text" data-prop="src">
                    </div>
                    <div class="ve-prop-group" data-for-tag="INPUT">
                        <label>Placeholder:</label>
                        <input type="text" data-prop="placeholder">
                    </div>
                    <div class="ve-prop-group" data-for-tag="INPUT">
                        <label>Type Input:</label>
                        <select data-prop="type">
                            <option value="text">text</option>
                            <option value="number">number</option>
                            <option value="email">email</option>
                            <option value="password">password</option>
                            <option value="date">date</option>
                            <option value="checkbox">checkbox</option>
                            <option value="radio">radio</option>
                            <option value="submit">submit</option>
                        </select>
                    </div>
                </fieldset>
            </div>

            <div id="tab-layout" class="ve-tab-pane">
                <fieldset>
                    <legend>Posisi & Ukuran</legend>
                    <label>Position
                        <select data-prop="style.position">
                            <option value="">-- Default --</option>
                            <option value="absolute">Absolute</option>
                            <option value="relative">Relative</option>
                            <option value="fixed">Fixed</option>
                            <option value="static">Static</option>
                        </select>
                    </label>
                    <label>Top (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.top"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Right (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.right"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Bottom (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.bottom"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Left (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.left"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Width (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.width"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Height (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.height"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Z-Index <div class="ve-input-wrapper"><input type="number" data-prop="style.zIndex"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                </fieldset>
                <fieldset>
                    <legend>Margin (px)</legend>
                    <label>Top <div class="ve-input-wrapper"><input type="number" data-prop="style.marginTop"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Right <div class="ve-input-wrapper"><input type="number" data-prop="style.marginRight"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Bottom <div class="ve-input-wrapper"><input type="number" data-prop="style.marginBottom"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Left <div class="ve-input-wrapper"><input type="number" data-prop="style.marginLeft"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                </fieldset>
                <fieldset>
                    <legend>Padding (px)</legend>
                    <label>Top <div class="ve-input-wrapper"><input type="number" data-prop="style.paddingTop"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Right <div class="ve-input-wrapper"><input type="number" data-prop="style.paddingRight"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Bottom <div class="ve-input-wrapper"><input type="number" data-prop="style.paddingBottom"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Left <div class="ve-input-wrapper"><input type="number" data-prop="style.paddingLeft"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                </fieldset>
                <fieldset>
                    <legend>Tampilan</legend>
                    <label>Display
                        <select data-prop="style.display">
                            <option>block</option>
                            <option>inline-block</option>
                            <option>inline</option>
                            <option>flex</option>
                            <option>grid</option>
                            <option>none</option>
                        </select>
                    </label>
                    <label>Overflow
                        <select data-prop="style.overflow">
                             <option value="">-- Default --</option>
                             <option value="visible">Visible</option>
                             <option value="hidden">Hidden</option>
                             <option value="scroll">Scroll</option>
                             <option value="auto">Auto</option>
                        </select>
                    </label>
                </fieldset>
            </div>

            <div id="tab-typography" class="ve-tab-pane">
                <fieldset>
                    <legend>Font</legend>
                    <label>Color <input type="color" data-prop="style.color"></label>
                    <label>Font Size (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.fontSize"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Font Family
                        <select data-prop="style.fontFamily">
                            <option>Arial, sans-serif</option>
                            <option>Georgia, serif</option>
                            <option>Courier New, monospace</option>
                            <option>Verdana, sans-serif</option>
                            <option>Times New Roman, serif</option>
                            <option>Segoe UI, sans-serif</option>
                            <option>Roboto, sans-serif</option>
                            <option>Open Sans, sans-serif</option>
                        </select>
                    </label>
                    <label>Font Weight
                        <select data-prop="style.fontWeight">
                            <option>normal</option>
                            <option>bold</option>
                            <option>100</option>
                            <option>200</option>
                            <option>300</option>
                            <option>400</option>
                            <option>500</option>
                            <option>600</option>
                            <option>700</option>
                            <option>800</option>
                            <option>900</option>
                        </select>
                    </label>
                </fieldset>
                <fieldset>
                    <legend>Teks</legend>
                    <label>Text Align
                        <select data-prop="style.textAlign">
                            <option>left</option>
                            <option>center</option>
                            <option>right</option>
                            <option>justify</option>
                        </select>
                    </label>
                    <label>Line Height <div class="ve-input-wrapper"><input type="text" data-prop="style.lineHeight" placeholder="e.g., 1.5 or 24px"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Letter Spacing (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.letterSpacing"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Text Decoration
                        <select data-prop="style.textDecoration">
                            <option>none</option>
                            <option>underline</option>
                            <option>overline</option>
                            <option>line-through</option>
                        </select>
                    </label>
                </fieldset>
            </div>

            <div id="tab-background" class="ve-tab-pane">
                <fieldset>
                    <legend>Latar Belakang</legend>
                    <label>BG Color <input type="color" data-prop="style.backgroundColor"></label>
                    <label>BG Image URL <input type="text" data-prop="style.backgroundImage" placeholder="url('image.jpg')"></label>
                    <label>BG Size
                        <select data-prop="style.backgroundSize">
                            <option value="">auto</option>
                            <option>cover</option>
                            <option>contain</option>
                        </select>
                    </label>
                    <label>BG Repeat
                        <select data-prop="style.backgroundRepeat">
                            <option value="">repeat</option>
                            <option>no-repeat</option>
                            <option>repeat-x</option>
                            <option>repeat-y</option>
                        </select>
                    </label>
                    <label>BG Position
                        <input type="text" data-prop="style.backgroundPosition" placeholder="e.g., center top">
                    </label>
                </fieldset>
            </div>

            <div id="tab-border" class="ve-tab-pane">
                <fieldset>
                    <legend>Border</legend>
                    <label>Width (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.borderWidth"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Style
                        <select data-prop="style.borderStyle">
                            <option>none</option>
                            <option>solid</option>
                            <option>dashed</option>
                            <option>dotted</option>
                            <option>double</option>
                        </select>
                    </label>
                    <label>Color <input type="color" data-prop="style.borderColor"></label>
                </fieldset>
                <fieldset>
                    <legend>Border Radius (px)</legend>
                    <label>All <div class="ve-input-wrapper"><input type="number" data-prop="style.borderRadius"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Top Left <div class="ve-input-wrapper"><input type="number" data-prop="style.borderTopLeftRadius"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Top Right <div class="ve-input-wrapper"><input type="number" data-prop="style.borderTopRightRadius"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Bottom Right <div class="ve-input-wrapper"><input type="number" data-prop="style.borderBottomRightRadius"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Bottom Left <div class="ve-input-wrapper"><input type="number" data-prop="style.borderBottomLeftRadius"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                </fieldset>
            </div>

            <div id="tab-effects" class="ve-tab-pane">
                <fieldset>
                    <legend>Opacity & Shadow</legend>
                    <label>Opacity (0-1) <input type="range" min="0" max="1" step="0.01" data-prop="style.opacity"></label>
                    <label>Box Shadow <input type="text" placeholder="e.g., 2px 2px 5px #888" data-prop="style.boxShadow"></label>
                    <label>Text Shadow <input type="text" placeholder="e.g., 1px 1px 2px black" data-prop="style.textShadow"></label>
                </fieldset>
                <fieldset>
                    <legend>Filter</legend>
                    <label>Filter CSS</label>
                    <input type="text" placeholder="e.g. blur(5px) brightness(1.2)" data-prop="style.filter">
                </fieldset>
                <fieldset>
                    <legend>Transform</legend>
                    <label>Rotate (deg) <div class="ve-input-wrapper"><input type="number" data-prop="style.transform.rotate" data-transform-prop="rotateZ"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>Scale (e.g., 1.2) <input type="number" step="0.1" data-prop="style.transform.scale" data-transform-prop="scale"></label>
                    <label>TranslateX (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.transform.translateX" data-transform-prop="translateX"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                    <label>TranslateY (px) <div class="ve-input-wrapper"><input type="number" data-prop="style.transform.translateY" data-transform-prop="translateY"><span class="ve-scrubber" title="Geser untuk mengubah nilai">&harr;</span></div></label>
                </fieldset>
            </div>

            <div id="tab-methods" class="ve-tab-pane">
                <fieldset>
                    <legend>Event Handling</legend>
                    <div class="ve-prop-group">
                        <label>onRefresh (Jalankan saat load/segar)</label>
                        <textarea data-prop="dataset.onrefresh" rows="3" placeholder="Contoh: new Date().toLocaleString('id-ID')"></textarea>
                    </div>
                    <div class="ve-prop-group">
                        <label>onClick (di mode lihat)</label>
                        <textarea data-prop="dataset.onclick" rows="5" placeholder="Contoh: alert('Elemen ' + this.id + ' diklik!')"></textarea>
                    </div>
                </fieldset>
                <div class="ve-security-note">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    <strong>Perhatian:</strong> Menggunakan skrip kustom dapat menimbulkan risiko keamanan.
                </div>
            </div>

            <div id="tab-vue-props" class="ve-tab-pane">
                <fieldset>
                    <legend>Properti Komponen Vue</legend>
                    <div class="ve-prop-group" data-for-tag="VUE-COMPONENT">
                        <label>Pesan Komponen:</label>
                        <input type="text" data-prop="dataset.vueMessage">
                    </div>
                    </fieldset>
            </div>
        </div>
    </div>
`;

document.getElementById("tool").innerHTML = tol;