<div class="container-fluid">
    <h2>{{ if .IsEdit }}Kategori Düzenle{{ else }}Yeni Kategori{{ end }}</h2>
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            {{ if .IsEdit }}
            <form action="/admin/categories/{{ .Category.ID }}/update" method="POST">
            {{ else }}
            <form action="/admin/categories/create" method="POST">
            {{ end }}
                <div class="mb-3">
                    <label class="form-label">Başlık</label>
                    <input id="category-title" type="text" name="title" class="form-control" value="{{ if .IsEdit }}{{ .Category.Title }}{{ end }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Slug</label>
                    <div class="input-group">
                        <input id="category-slug" type="text" name="slug" class="form-control" value="{{ if .IsEdit }}{{ .Category.Slug }}{{ end }}" required>
                        <button id="reset-slug" type="button" class="btn btn-outline-secondary">Oluştur</button>
                    </div>
                    <div class="form-text">Slug otomatik oluşturulur; düzenleyebilirsiniz.</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Açıklama</label>
                    <textarea name="description" class="form-control">{{ if .IsEdit }}{{ .Category.Description }}{{ end }}</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Parent</label>
                    <select name="parent_id" class="form-select">
                        <option value="">-- Yok --</option>
                        {{ range .Parents }}
                        <option value="{{ .ID }}" {{ if $.IsEdit }}{{ if eq $.ParentID .ID }}selected{{ end }}{{ end }}>{{ .Title }}</option>
                        {{ end }}
                    </select>
                </div>
                <div class="d-flex gap-2">
                    <a href="/admin/content/categories" class="btn btn-secondary">Geri</a>
                    <button class="btn btn-primary" type="submit">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    (function(){
        function slugify(s){
            if(!s) return '';
            s = s.trim();
            // Turkish char replacements
            s = s.replace(/ç/g,'c').replace(/Ç/g,'c')
                 .replace(/ğ/g,'g').replace(/Ğ/g,'g')
                 .replace(/ı/g,'i').replace(/İ/g,'i')
                 .replace(/ö/g,'o').replace(/Ö/g,'o')
                 .replace(/ş/g,'s').replace(/Ş/g,'s')
                 .replace(/ü/g,'u').replace(/Ü/g,'u');
            // remove diacritics
            s = s.normalize('NFKD').replace(/\p{M}/gu, '');
            s = s.toLowerCase();
            s = s.replace(/[^a-z0-9]+/g,'-');
            s = s.replace(/^-+|-+$/g,'');
            return s;
        }

        const titleEl = document.getElementById('category-title');
        const slugEl = document.getElementById('category-slug');
        const resetBtn = document.getElementById('reset-slug');
        if(!titleEl || !slugEl) return;

        let manual = false;
        slugEl.addEventListener('input', ()=> { manual = true; });
        titleEl.addEventListener('input', ()=> {
            if(!manual){ slugEl.value = slugify(titleEl.value); }
        });
        resetBtn.addEventListener('click', ()=> { slugEl.value = slugify(titleEl.value); manual = false; });
    })();
</script>
