{{define "publish"}}
<section class="pub-page">
  <link rel="stylesheet" href="/static/css/blog.css?v={{assetVer}}">

  <header class="pub-head">
    <span class="pub-kicker">写文章</span>
    <h1 class="pub-title">把想说的，落成一篇</h1>
    <p class="pub-note">
      以 <strong>{{.User.Username}}</strong> 的身份发布。正文支持 Markdown：
      <code>##</code> 起标题、<code>**加粗**</code>、<code>&gt;</code> 引一句、<code>-</code> 起一列。
      写完可以先存草稿，也可以定个时间让它自己上线。
    </p>
  </header>

  {{if .Data.Error}}<div class="alert alert-err">{{.Data.Error}}</div>{{end}}

  <form class="pub-form" method="post" action="/publish">
    <input type="hidden" name="csrf" value="{{.CSRF}}">

    <div class="pub-field">
      <label for="pubTitle">标题</label>
      <input id="pubTitle" type="text" name="title" required autofocus maxlength="200" placeholder="给这篇文章起个名字">
    </div>

    <div class="pub-field">
      <label>封面图（可选）</label>
      <div class="blog-cover">
        <img class="blog-cover-img" id="pubCoverImg" alt="封面预览" hidden>
        <div class="blog-cover-actions">
          <label class="btn btn-ghost btn-sm blog-nowrap">🖼 选择封面<input id="pubCoverFile" type="file" accept="image/*" hidden></label>
          <button class="btn btn-ghost btn-sm blog-nowrap" type="button" id="pubCoverClear" hidden>移除封面</button>
        </div>
      </div>
      <span class="pub-hint">不选也能发布。选好的封面会出现在列表页与分享卡片上，图片自动压缩后再保存。</span>
      <input type="hidden" name="cover" id="pubCoverPath" value="">
    </div>

    <div class="pub-field">
      <label for="pubContent">正文</label>
      <div class="blog-toolbar">
        <label class="btn btn-ghost btn-sm blog-nowrap">🖼 插入图片<input id="pubImgFile" type="file" accept="image/*" hidden></label>
        <span class="blog-toolbar-tip" id="pubImgTip">图片上传后会插入到光标所在的位置</span>
      </div>
      <textarea id="pubContent" name="content" class="pub-editor" placeholder="# 从这里开始写…"></textarea>
    </div>

    <div class="pub-cols">
      <div class="pub-field">
        <label for="pubCat">分类</label>
        <select id="pubCat" name="category_id">
          <option value="0">未分类</option>
          {{range .Data.Categories}}
          <option value="{{.ID}}">{{.Name}}</option>
          {{end}}
        </select>
      </div>
      <div class="pub-field">
        <label for="pubTags">标签</label>
        <input id="pubTags" type="text" name="tags" placeholder="用逗号或顿号分隔，例如：随笔, 深夜">
      </div>
    </div>

    {{if .Data.CoauthorEnabled}}
    <div class="pub-field blog-coauthor-box">
      <label for="pubCoauthors">点名共创（可选）</label>
      <input id="pubCoauthors" type="text" name="coauthors" value="{{.Data.CoauthorNames}}" placeholder="填写站内用户名，多个用逗号或顿号分隔">
      <span class="pub-hint">被点名的人会在消息中心收到邀请，等他确认同意之后，才会与你一起出现在文章署名里。</span>
    </div>
    {{end}}

    <div class="pub-cols">
      <div class="pub-field">
        <label for="pubStatus">状态</label>
        <select id="pubStatus" name="status">
          <option value="published" selected>发布 · 立刻公开</option>
          <option value="draft">草稿 · 只有自己看得见</option>
          <option value="scheduled">定时 · 到点自动公开</option>
        </select>
      </div>
      <div class="pub-field" id="pubScheduleRow">
        <label for="pubAt">上线时间</label>
        <input id="pubAt" type="datetime-local" name="publish_at">
        <span class="pub-hint">按站点时区填写，到点后自动上线并推送收录。</span>
      </div>
    </div>

    <details class="pub-more">
      <summary>摘要与链接别名（可选）</summary>
      <div class="pub-field">
        <label for="pubSummary">摘要</label>
        <textarea id="pubSummary" name="summary" class="pub-small" placeholder="列表页展示的简短描述；留空则自动截取正文"></textarea>
      </div>
      <div class="pub-field">
        <label for="pubSlug">链接别名</label>
        <input id="pubSlug" type="text" name="slug" placeholder="留空则根据标题自动生成">
        <span class="pub-hint">文章地址会是 /post/别名</span>
      </div>
    </details>

    <div class="pub-actions">
      <button class="btn btn-primary" type="submit">写完了，提交</button>
      <a class="btn btn-ghost" href="/admin/posts/all">我的文章</a>
      <a class="btn btn-ghost" href="/blog">先不写了</a>
    </div>
  </form>
</section>

<script>
  (function () {
    var sel = document.getElementById('pubStatus');
    var row = document.getElementById('pubScheduleRow');
    if (sel && row) {
      var sync = function () { row.style.display = sel.value === 'scheduled' ? '' : 'none'; };
      sel.addEventListener('change', sync);
      sync();
    }
    var csrfBox = document.querySelector('.pub-form input[name="csrf"]');
    var csrf = csrfBox ? csrfBox.value : '';
    // 上传一张图，成功后把 /uploads/... 交给 done
    function upload(file, tip, done) {
      var fd = new FormData();
      fd.append('file', file);
      fd.append('csrf', csrf);
      if (tip) tip.textContent = '上传中…';
      fetch('/blog/upload', { method: 'POST', body: fd })
        .then(function (r) { return r.json(); })
        .then(function (res) {
          if (res && res.path) { done(res.path); return; }
          if (tip) tip.textContent = (res && res.error) || '图片上传失败，请重试';
        })
        .catch(function () { if (tip) tip.textContent = '图片上传失败，请重试'; });
    }
    // 正文插图：上传成功后把 Markdown 图片语法插到光标处
    var editor = document.getElementById('pubContent');
    var imgFile = document.getElementById('pubImgFile');
    var imgTip = document.getElementById('pubImgTip');
    if (editor && imgFile) {
      imgFile.addEventListener('change', function () {
        var file = imgFile.files && imgFile.files[0];
        if (!file) return;
        upload(file, imgTip, function (path) {
          var mark = '![图片](' + path + ')';
          var start = editor.selectionStart || 0;
          var end = editor.selectionEnd || 0;
          editor.value = editor.value.slice(0, start) + mark + editor.value.slice(end);
          editor.selectionStart = editor.selectionEnd = start + mark.length;
          editor.focus();
          if (imgTip) imgTip.textContent = '图片已插入到正文';
        });
        imgFile.value = '';
      });
    }
    // 封面：选图 → 上传 → 预览，可更换、可移除
    var coverFile = document.getElementById('pubCoverFile');
    var coverPath = document.getElementById('pubCoverPath');
    var coverImg = document.getElementById('pubCoverImg');
    var coverClear = document.getElementById('pubCoverClear');
    if (coverFile && coverPath && coverImg) {
      coverFile.addEventListener('change', function () {
        var file = coverFile.files && coverFile.files[0];
        if (!file) return;
        upload(file, null, function (path) {
          coverPath.value = path;
          coverImg.src = path;
          coverImg.hidden = false;
          if (coverClear) coverClear.hidden = false;
        });
        coverFile.value = '';
      });
    }
    if (coverClear) {
      coverClear.addEventListener('click', function () {
        coverPath.value = '';
        coverImg.removeAttribute('src');
        coverImg.hidden = true;
        coverClear.hidden = true;
      });
    }
  })();
</script>
{{end}}