{% extends "admin/base.html" %}

<!-- ============================================================
     admin/posts-form.html — 文章创建/编辑表单
     新建和编辑共用此模板，通过 is_new 区分。

     模板变量：
       - post: Option<Post> 编辑时有值，新建时为 None
       - is_new: bool true=新建, false=编辑
     ============================================================ -->

{% block title %}{% if is_new %}新建文章{% else %}编辑文章{% endif %} — {{ site_name }}{% endblock %}

{% block sidebar %}
{% include "admin/partials/sidebar.html" %}
{% endblock %}

{% block content %}
<div class="admin-header-bar">
    <h1 class="admin-page-title">{% if is_new %}写新文章{% else %}编辑文章{% endif %}</h1>
</div>

<form class="admin-form" method="POST"
      action="{% if is_new %}/admin/posts{% else %}/admin/posts/{{ post.id }}{% endif %}">

    <div class="form-group">
        <label class="form-label" for="title">标题</label>
        <input type="text" id="title" name="title" class="form-input"
               value="{% if post %}{{ post.title }}{% endif %}" required>
    </div>

    <div class="form-group">
        <label class="form-label" for="slug">URL 标识</label>
        <input type="text" id="slug" name="slug" class="form-input"
               value="{% if post %}{{ post.slug }}{% endif %}" required
               placeholder="例如: hello-world（字母数字和横线）">
        <p class="form-hint">用于生成文章链接，如 /blog/hello-world。创建后不建议修改。</p>
    </div>

    <div class="form-group">
        <label class="form-label" for="content_md">内容（Markdown）</label>
        <textarea id="content_md" name="content_md" class="form-textarea" required
            placeholder="在这里写文章内容...">{% if post %}{{ post.content_md }}{% endif %}</textarea>
    </div>

    <!-- 图片上传：上传后自动在 textarea 光标位置插入 Markdown 图片语法 -->
    <div class="form-group">
        <label class="form-label">插入图片</label>
        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <input type="file" id="image-input" accept="image/*" class="form-input"
                   style="padding: 0.4rem; flex: 1;">
            <button type="button" class="btn btn-secondary" onclick="uploadImage()" id="img-upload-btn">上传并插入</button>
        </div>
        <div class="upload-progress" id="img-progress">
            <div class="upload-progress-bar">
                <div class="upload-progress-fill" id="img-progress-fill"></div>
            </div>
            <div class="upload-progress-text" id="img-progress-text"></div>
        </div>
        <p class="form-hint">支持 JPG、PNG、GIF、SVG，上传后自动在光标位置插入 <code>![图片](URL)</code>。</p>
    </div>

    <script>
    function uploadImage() {
        const input = document.getElementById('image-input');
        const file = input.files[0];
        if (!file) return;

        const btn = document.getElementById('img-upload-btn');
        const progressDiv = document.getElementById('img-progress');
        const progressFill = document.getElementById('img-progress-fill');
        const progressText = document.getElementById('img-progress-text');

        btn.disabled = true;
        btn.textContent = '上传中…';
        progressDiv.classList.add('active');

        const formData = new FormData();
        formData.append('file', file);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/admin/upload', true);

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                var pct = Math.round((e.loaded / e.total) * 100);
                progressFill.style.width = pct + '%';
                progressText.textContent = pct + '%';
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                if (data.url) {
                    const textarea = document.getElementById('content_md');
                    const start = textarea.selectionStart;
                    const end = textarea.selectionEnd;
                    const imgMd = '\n![图片](' + data.url + ')\n';
                    textarea.value = textarea.value.slice(0, start) + imgMd + textarea.value.slice(end);
                    textarea.selectionStart = textarea.selectionEnd = start + imgMd.length;
                    textarea.focus();
                    progressFill.style.width = '100%';
                    progressText.textContent = '✅ 已插入';
                } else {
                    alert('上传失败: ' + (data.error || '未知错误'));
                    progressDiv.classList.remove('active');
                }
            } else {
                alert('上传失败 (HTTP ' + xhr.status + ')');
                progressDiv.classList.remove('active');
            }
            btn.disabled = false;
            btn.textContent = '上传并插入';
            input.value = '';
        };

        xhr.onerror = function() {
            alert('网络错误，上传中断');
            progressDiv.classList.remove('active');
            btn.disabled = false;
            btn.textContent = '重试';
        };

        xhr.send(formData);
    }
    </script>

    <div class="form-group">
        <label class="form-label" for="excerpt">摘要</label>
        <textarea id="excerpt" name="excerpt" class="form-input"
            style="min-height: 60px; font-family: inherit;"
            placeholder="留空则自动截取前 200 个字符">{% if post %}{{ post.excerpt }}{% endif %}</textarea>
    </div>

    <div class="form-group">
        <label class="form-label" for="cover_image">封面图 URL（可选）</label>
        <input type="text" id="cover_image" name="cover_image" class="form-input"
               value="{% if post %}{{ post.cover_image }}{% endif %}"
               placeholder="https://example.com/image.jpg">
    </div>

    <div class="form-group">
        <label class="form-checkbox">
            <input type="checkbox" name="published"
                {% if post and post.published %}checked{% endif %}>
            <span>立即发布</span>
        </label>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            {% if is_new %}创建文章{% else %}保存修改{% endif %}
        </button>
        <a href="/admin/posts" class="btn btn-secondary">取消</a>
    </div>
</form>
{% endblock %}