<!-- TOOLTIP USAGE EXAMPLES -->
<!-- Add these examples to your form fields -->

<!-- Example 1: Slug Field with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="slug">Slug *</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Der Slug ist die URL-freundliche Version des Titels. 
                Nur Kleinbuchstaben, Zahlen und Bindestriche erlaubt. 
                Beispiel: "ueber-uns" → yoursite.com/ueber-uns
            </span>
        </span>
    </div>
    <input type="text" id="slug" name="slug" class="form-input" required>
</div>

<!-- Example 2: Meta Description with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="meta_description">Meta-Beschreibung</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Diese Beschreibung erscheint in Google-Suchergebnissen. 
                Optimale Länge: 150-160 Zeichen. 
                Beschreibe kurz den Inhalt der Seite.
            </span>
        </span>
    </div>
    <textarea id="meta_description" name="meta_description" 
              class="form-textarea" rows="2" maxlength="160"></textarea>
</div>

<!-- Example 3: Parent Page with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="parent_page">Übergeordnete Seite</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Optional: Wähle eine übergeordnete Seite für eine hierarchische Struktur. 
                Dies erstellt eine URL wie: /parent-page/diese-seite
            </span>
        </span>
    </div>
    <select id="parent_page" name="parent_page" class="form-select">
        <option value="">Keine (Top-Level Seite)</option>
        <!-- Options here -->
    </select>
</div>

<!-- Example 4: Status Field with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="status">Status</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content">
                Veröffentlicht = Live auf der Website | Entwurf = Nur für Admins sichtbar
            </span>
        </span>
    </div>
    <select id="status" name="status" class="form-select">
        <option value="published">Veröffentlicht</option>
        <option value="draft">Entwurf</option>
    </select>
</div>

<!-- Example 5: Blog Category with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="category">Kategorie</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content">
                Kategorisiere deinen Blog-Post für bessere Organisation und Navigation
            </span>
        </span>
    </div>
    <input type="text" id="category" name="category" class="form-input" 
           placeholder="z.B. News, Tutorials, Updates">
</div>

<!-- Example 6: Featured Image with Tooltip -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="featured_image">Titelbild</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Das Titelbild wird in der Blog-Übersicht und am Anfang des Artikels angezeigt. 
                Empfohlene Größe: 1200x630px
            </span>
        </span>
    </div>
    <input type="file" id="featured_image" name="featured_image" 
           class="form-input" accept="image/*">
</div>

<!-- Example 7: SEO Title with Character Count -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="seo_title">SEO Titel</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Der Titel, der in Google-Suchergebnissen erscheint. 
                Optimal: 50-60 Zeichen. Zu lang = wird abgeschnitten
            </span>
        </span>
    </div>
    <input type="text" id="seo_title" name="seo_title" 
           class="form-input" maxlength="60" 
           placeholder="Toller Titel für Google">
    <div class="form-hint">
        <span id="seo_title_count">0</span>/60 Zeichen
    </div>
</div>

<!-- Example 8: Maintenance Mode Toggle -->
<div class="form-group">
    <div class="form-label-with-tooltip">
        <label class="form-label" for="maintenance_mode">Wartungsmodus</label>
        <span class="tooltip-container">
            <span class="tooltip-icon">i</span>
            <span class="tooltip-content wrap">
                Aktiviert = Website für Besucher gesperrt (nur Admins haben Zugriff). 
                Nützlich während Updates oder Umbauten.
            </span>
        </span>
    </div>
    <label class="switch">
        <input type="checkbox" id="maintenance_mode" name="maintenance_mode" value="1">
        <span class="slider"></span>
    </label>
</div>

<!-- JAVASCRIPT for Character Counter (Optional) -->
<script>
document.getElementById('seo_title')?.addEventListener('input', function() {
    const count = this.value.length;
    document.getElementById('seo_title_count').textContent = count;
});
</script>

<!-- 
HOW TO USE:

1. Add the tooltip CSS to /cms-core/public/webview/assets/css/admin.css
2. Copy the tooltip HTML structure above to any form field
3. Customize the tooltip text for your specific field
4. The tooltip will automatically show on hover!

TOOLTIP STRUCTURE:
<span class="tooltip-container">
    <span class="tooltip-icon">i</span>
    <span class="tooltip-content [wrap]">Your helpful text here</span>
</span>

Add "wrap" class to tooltip-content for multi-line text.
-->