<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h4>{{ if .IsEdit }}Yazıyı Düzenle{{ else }}Yeni Yazı{{ end }}</h4>
                    <form action="{{ if .IsEdit }}/admin/posts/{{ .Post.ID }}/update{{ else }}/admin/posts/create{{ end }}" method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label">Başlık</label>
                            <input type="text" name="title" class="form-control" value="{{ if .IsEdit }}{{ .Post.Title }}{{ end }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Slug</label>
                            <input type="text" name="slug" class="form-control" value="{{ if .IsEdit }}{{ .Post.Slug }}{{ end }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">İçerik</label>
                            <textarea id="contentInput" name="content" rows="8" class="form-control d-none">{{ if .IsEdit }}{{ .Post.Content }}{{ end }}</textarea>
                            <div id="quillEditor" style="min-height:300px;border:1px solid #ddd;border-radius:4px;">
                                <!-- initial content will be loaded from the hidden textarea by JS -->
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Kategoriler (Ctrl/Tık birden çok seçim)</label>
                            <select name="category_ids" class="form-select" multiple>
                                {{ range .Categories }}
                                <option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Post.Categories }}{{ if eq .ID $.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Title }}</option>
                                {{ end }}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Taglar (Ctrl/Tık birden çok seçim)</label>
                            <select name="tag_ids" class="form-select" multiple>
                                {{ range .Tags }}
                                <option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Post.Tags }}{{ if eq .ID $.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Name }}</option>
                                {{ end }}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Görsel (Tek dosya)</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <div class="mt-2">
                                <img id="imagePreview" src="" alt="preview" class="rounded" style="display:none;width:150px;height:150px;object-fit:cover;border:1px solid #ddd;">
                            </div>
                        <div class="row g-2">
                            <div class="col-3">
                                <label class="form-label">Genişlik</label>
                                <input type="number" name="width" class="form-control" value="{{ if .IsEdit }}{{ .Post.Width }}{{ else }}1920{{ end }}">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Yükseklik</label>
                                <input type="number" name="height" class="form-control" value="{{ if .IsEdit }}{{ .Post.Height }}{{ else }}1080{{ end }}">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Kalite</label>
                                <input type="number" name="quality" class="form-control" value="{{ if .IsEdit }}{{ .Post.Quality }}{{ else }}80{{ end }}">
                            </div>
                            <div class="col-3">
                                <label class="form-label">Format</label>
                                <select name="format" class="form-select">
                                    <option value="avif" {{ if .IsEdit }}{{ if eq .Post.Format "avif" }}selected{{ end }}{{ end }}>AVIF</option>
                                    <option value="webp" {{ if .IsEdit }}{{ if eq .Post.Format "webp" }}selected{{ end }}{{ end }}>WebP</option>
                                    <option value="jpg" {{ if .IsEdit }}{{ if eq .Post.Format "jpg" }}selected{{ end }}{{ end }}>JPG</option>
                                    <option value="png" {{ if .IsEdit }}{{ if eq .Post.Format "png" }}selected{{ end }}{{ end }}>PNG</option>
                                </select>
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-2">
                            <button class="btn btn-primary">{{ if .IsEdit }}Güncelle{{ else }}Oluştur{{ end }}</button>
                            <a href="/admin/content/posts" class="btn btn-outline-secondary" hx-get="/admin/content/posts" hx-target="#main-content" hx-push-url="true">İptal</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Mevcut Görsel</h6>
                    {{ if .IsEdit }}
                        {{ if .Post.Images }}
                            <div class="small text-muted">Görsel yolları: {{ .Post.Images }}</div>
                        {{ else }}
                            <div class="text-muted small">Henüz görsel yüklenmedi.</div>
                        {{ end }}
                    {{ else }}
                        <div class="text-muted small">Henüz görsel yüklenmedi.</div>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
    const fileInput = document.querySelector('input[name="image"]');
    const preview = document.getElementById('imagePreview');
    // show existing image if provided by controller
    const firstImage = '{{ .FirstImage }}';
    if (firstImage && firstImage !== '') {
        preview.src = firstImage;
        preview.style.display = 'block';
    }
    if (fileInput) {
        fileInput.addEventListener('change', function(e){
            const f = this.files && this.files[0];
            if (!f) return;
            const reader = new FileReader();
            reader.onload = function(ev){
                preview.src = ev.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(f);
        });
    }
});
</script>

    <!-- Quill: load local CSS and JS; initialize editor and sync to textarea on submit -->
    <link href="/assets/quill/dist/quill.snow.css" rel="stylesheet">
    <script src="/assets/quill/dist/quill.js"></script>
    <script>
    (function initQuill(){
        try {
            var textarea = document.getElementById('contentInput');
            var editorContainer = document.getElementById('quillEditor');
            if (!editorContainer) return;
            // Avoid double-init
            if (editorContainer.__quillInitialized) return;
            // Initialize Quill
            var quill = new Quill(editorContainer, {
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'image'], ['code-block'], ['clean']],
                        handlers: {
                            image: function() {
                                try { window.showImageModal(quill); } catch(e) { console.error('open image modal failed', e); }
                            }
                        }
                    }
                }
            });
            editorContainer.__quillInitialized = true;
            // Load initial content from textarea (if any)
            if (textarea && textarea.value && textarea.value.trim() !== '') {
                quill.clipboard.dangerouslyPasteHTML(textarea.value);
            }
            // On form submit, copy html to hidden textarea
            var form = textarea && textarea.form;
            if (form) {
                form.addEventListener('submit', function(e){
                    textarea.value = quill.root.innerHTML;
                });
            }
        } catch (err) {
            console.error('Quill init error:', err);
        }
    })();
    </script>
