@extends('layouts.app')
@section('title', 'Slug Generator – URL-freundliche Slugs erstellen | kotsch.tech')
@section('meta_description', 'Wandle Text in URL-freundliche Slugs um: kebab-case, snake_case, camelCase, PascalCase, dot.case, SCREAMING – mit Umlaut-Umwandlung und Sofort-Vorschau.')
@section('meta_extra')
<meta name="keywords" content="Slug Generator, URL Slug, kebab-case, snake_case, camelCase, PascalCase, URL-freundlich, Umlaut">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.variant-row { display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color 0.15s; margin-bottom:8px; }
.variant-row:hover { border-color:var(--accent); }
.variant-label { display:flex; align-items:center; padding:0 14px; background:var(--bg); font-size:0.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); border-right:1.5px solid var(--line); min-width:150px; white-space:nowrap; }
.variant-input { flex:1; padding:12px 14px; border:none; outline:none; font-family:'JetBrains Mono',monospace; font-size:0.88rem; font-weight:600; color:var(--ink); background:var(--card); }
.variant-copy { display:flex; align-items:center; padding:0 14px; background:var(--bg); border-left:1.5px solid var(--line); cursor:pointer; color:var(--muted); font-size:0.82rem; font-weight:700; transition:all 0.12s; border:none; white-space:nowrap; }
.variant-copy:hover { background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-link"></i> Text</span>
        <h1 class="tool-h1">Slug<span> Generator.</span></h1>
        <p class="tool-sub">Text in alle gängigen Code-Formate umwandeln – mit Umlaut-Umwandlung und Sofort-Vorschau.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Text eingeben</label>
            <input type="text" class="t-input" id="slug-input" placeholder="Mein toller Artikel-Titel…" oninput="updateSlugs()" autocomplete="off" spellcheck="false" style="font-size:1.1rem;font-weight:600">
        </div>

        <div style="margin-top:12px;display:flex;gap:10px;flex-wrap:wrap">
            <div class="t-toggle-row" style="flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                <label for="opt-lower">Kleinbuchstaben</label>
                <input type="checkbox" id="opt-lower" class="t-check" checked onchange="updateSlugs()">
            </div>
            <div class="t-toggle-row" style="flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                <label for="opt-umlauts">Umlaute umwandeln</label>
                <input type="checkbox" id="opt-umlauts" class="t-check" checked onchange="updateSlugs()">
            </div>
            <div class="t-toggle-row" style="flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                <label for="opt-special">Sonderzeichen entfernen</label>
                <input type="checkbox" id="opt-special" class="t-check" checked onchange="updateSlugs()">
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-code"></i> Varianten</div>
        <div id="variants-list">
            <div class="variant-row">
                <div class="variant-label">kebab-case</div>
                <input class="variant-input" id="v-kebab" readonly>
                <button class="variant-copy" onclick="copyVariant('v-kebab',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">snake_case</div>
                <input class="variant-input" id="v-snake" readonly>
                <button class="variant-copy" onclick="copyVariant('v-snake',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">camelCase</div>
                <input class="variant-input" id="v-camel" readonly>
                <button class="variant-copy" onclick="copyVariant('v-camel',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">PascalCase</div>
                <input class="variant-input" id="v-pascal" readonly>
                <button class="variant-copy" onclick="copyVariant('v-pascal',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">dot.case</div>
                <input class="variant-input" id="v-dot" readonly>
                <button class="variant-copy" onclick="copyVariant('v-dot',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">Title Case</div>
                <input class="variant-input" id="v-title" readonly>
                <button class="variant-copy" onclick="copyVariant('v-title',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">SCREAMING_SNAKE</div>
                <input class="variant-input" id="v-screaming" readonly>
                <button class="variant-copy" onclick="copyVariant('v-screaming',this)"><i class="fas fa-copy"></i></button>
            </div>
            <div class="variant-row">
                <div class="variant-label">UPPERCASE</div>
                <input class="variant-input" id="v-upper" readonly>
                <button class="variant-copy" onclick="copyVariant('v-upper',this)"><i class="fas fa-copy"></i></button>
            </div>
        </div>

        <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="document.getElementById('slug-input').value='Mein toller Artikel-Titel mit Überraschungen!';updateSlugs()"><i class="fas fa-file-alt"></i> Beispiel</button>
            <button class="t-btn ghost sm" onclick="document.getElementById('slug-input').value='';updateSlugs()"><i class="fas fa-trash"></i> Leeren</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-info-circle"></i> Verwendung</div>
        <div class="t-grid-2" style="gap:10px;font-size:0.82rem">
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>kebab-case</strong><br><span style="color:var(--muted)">URLs, CSS-Klassen, HTML-IDs</span></div>
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>snake_case</strong><br><span style="color:var(--muted)">Python, Ruby, Datenbank-Spalten</span></div>
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>camelCase</strong><br><span style="color:var(--muted)">JavaScript, Java, C#</span></div>
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>PascalCase</strong><br><span style="color:var(--muted)">Klassen, Komponenten, Typen</span></div>
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>dot.case</strong><br><span style="color:var(--muted)">Config-Keys, i18n-Übersetzungen</span></div>
            <div style="padding:10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--line)"><strong>SCREAMING_SNAKE</strong><br><span style="color:var(--muted)">Konstanten, Umgebungsvariablen</span></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const UMLAUT_MAP = {
    'ä':'ae','ö':'oe','ü':'ue','Ä':'Ae','Ö':'Oe','Ü':'Ue','ß':'ss',
    'à':'a','á':'a','â':'a','ã':'a','å':'a','æ':'ae',
    'è':'e','é':'e','ê':'e','ë':'e',
    'ì':'i','í':'i','î':'i','ï':'i',
    'ò':'o','ó':'o','ô':'o','õ':'o','ø':'o',
    'ù':'u','ú':'u','û':'u','ý':'y','ÿ':'y',
    'ñ':'n','ç':'c','ð':'d','þ':'th',
};

function replaceUmlauts(s) {
    return s.split('').map(c => UMLAUT_MAP[c] || UMLAUT_MAP[c.toLowerCase()]?.toUpperCase?.() || UMLAUT_MAP[c.toLowerCase()] || c).join('');
}

function buildTokens() {
    let s = document.getElementById('slug-input').value;
    if (document.getElementById('opt-umlauts').checked) s = replaceUmlauts(s);
    if (document.getElementById('opt-special').checked) s = s.replace(/[^a-zA-Z0-9\s\-_]/g, ' ');
    const tokens = s.trim().split(/[\s\-_]+/).filter(Boolean);
    return tokens;
}

function capitalize(w) { return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase(); }

function updateSlugs() {
    const tokens = buildTokens();
    const lower = document.getElementById('opt-lower').checked;
    const tokensLower = tokens.map(t => lower ? t.toLowerCase() : t);

    document.getElementById('v-kebab').value = tokensLower.join('-');
    document.getElementById('v-snake').value = tokensLower.join('_');
    document.getElementById('v-camel').value = tokensLower.length ? tokensLower[0] + tokensLower.slice(1).map(capitalize).join('') : '';
    document.getElementById('v-pascal').value = tokens.map(capitalize).join('');
    document.getElementById('v-dot').value = tokensLower.join('.');
    document.getElementById('v-title').value = tokens.map(capitalize).join(' ');
    document.getElementById('v-screaming').value = tokens.join('_').toUpperCase();
    document.getElementById('v-upper').value = tokens.join(' ').toUpperCase();
}

function copyVariant(id, btn) {
    const val = document.getElementById(id).value;
    if (!val) return;
    navigator.clipboard.writeText(val).then(() => {
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i>';
        btn.style.background = 'var(--accent)'; btn.style.color = '#fff';
        setTimeout(() => { btn.innerHTML = orig; btn.style.background=''; btn.style.color=''; }, 1500);
    });
}

document.getElementById('slug-input').value = 'Mein toller Artikel-Titel mit Überraschungen!';
updateSlugs();
</script>

@include('tools._seo_content', ['toolSlug' => 'slug-generator', 'toolName' => 'Slug Generator'])

@endsection