{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="{{.backURL}}" class="btn btn-ghost">← 返回列表</a>
</div>
<div class="card" style="max-width:880px">
  <div class="card-hd">
    {{if .is_page}}<span class="badge badge-yellow" style="margin-right:8px">单页</span>{{end}}
    {{if .is_edit}}✎ 编辑文章{{else}}＋ 发布文章{{end}}
  </div>
  <div class="card-bd">
    {{if .is_page}}
    <div style="background:var(--warning-bg);color:var(--amber);border-radius:var(--radius-xs);padding:10px 16px;margin-bottom:16px;font-size:13px">
      ⚡ 此栏目为单页类型，文章标题和栏目信息自动同步自栏目设置，请直接在下方编辑内容。
    </div>
    {{end}}
    <form id="articleForm">
      <input type="hidden" name="id" value="{{.article.ID}}">
      {{if .modelType.ID}}<input type="hidden" name="model_id" value="{{.modelType.ID}}">{{end}}
      <div class="fg">
        <label>文章标题</label>
        <input type="text" name="title" class="fctrl" value="{{.article.Title}}" placeholder="请输入文章标题" required {{if .is_page}}readonly style="background:var(--gray-50);cursor:not-allowed"{{end}}>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>所属栏目</label>
          {{if .is_page}}<input type="hidden" name="category_id" value="{{.article.CategoryID}}">{{end}}
          <select name="category_id" class="fctrl" required {{if .is_page}}disabled{{end}}>
            <option value="">请选择</option>
            {{range .categories}}
            <option value="{{.ID}}" {{if eq $.article.CategoryID .ID}}selected{{end}}>{{.Name}}</option>
            {{if .Children}}
            {{range .Children}}
            <option value="{{.ID}}" {{if eq $.article.CategoryID .ID}}selected{{end}}>├ {{.Name}}</option>
            {{if .Children}}
            {{range .Children}}
            <option value="{{.ID}}" {{if eq $.article.CategoryID .ID}}selected{{end}}>│ ├ {{.Name}}</option>
            {{end}}
            {{end}}
            {{end}}
            {{end}}
            {{end}}
          </select>
        </div>
        <div class="fg half">
          <label>状态</label>
          <select name="status" class="fctrl">
            <option value="1" {{if eq .article.Status 1}}selected{{end}}>已发布</option>
            <option value="0" {{if eq .article.Status 0}}selected{{end}}>草稿</option>
          </select>
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>作者</label>
          <input type="text" name="author" class="fctrl" value="{{.article.Author}}" placeholder="作者">
        </div>
        <div class="fg half">
          <label>来源</label>
          <input type="text" name="source" class="fctrl" value="{{.article.Source}}" placeholder="来源">
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>排序</label>
          <input type="number" name="sort" class="fctrl" value="{{.article.Sort}}">
        </div>
        <div class="fg half">
          <label>置顶</label>
          <select name="is_top" class="fctrl">
            <option value="0" {{if eq .article.IsTop 0}}selected{{end}}>不置顶</option>
            <option value="1" {{if eq .article.IsTop 1}}selected{{end}}>置顶</option>
          </select>
        </div>
      </div>
      <div class="fg">
        <label>缩略图</label>
        <div class="ug">
          <input type="text" name="thumb" class="fctrl" id="thumbUrl" value="{{.article.Thumb}}" placeholder="上传或输入URL">
          <button type="button" class="btn btn-info" onclick="uploadThumb()">上传</button>
        </div>
        <div id="thumbImageWrap" style="display:{{if .article.Thumb}}inline-block{{else}}none{{end}};position:relative;max-width:180px;margin-top:10px">
          <img id="thumbPreview" src="{{.article.Thumb}}" style="max-width:180px;border-radius:8px;box-shadow:var(--shadow)">
          <button type="button" onclick="clearThumbImage()" style="position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;line-height:22px;text-align:center;display:flex;align-items:center;justify-content:center" title="删除图片">&times;</button>
        </div>
      </div>
      <div class="fg">
        <label>SEO 关键词</label>
        <input type="text" name="keywords" class="fctrl" value="{{.article.Keywords}}" placeholder="用逗号分隔">
      </div>
      <div class="fg">
        <label>内容简述 <span class="text-xs text-muted">(留空则自动从内容截取前150字)</span></label>
        <textarea name="desc" class="fctrl" rows="2" placeholder="留空则自动从内容截取">{{.article.Desc}}</textarea>
      </div>
      {{if .modelType.ID}}
      <div class="card" style="margin-top:20px;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden">
        <div class="card-hd" style="border-left:4px solid var(--primary);padding:12px 18px;background:#f8fafc">
          <span style="font-size:14px;font-weight:600;color:#1e293b">{{.modelType.Name}} 扩展字段</span>
          <span class="text-xs text-muted" style="margin-left:8px">({{len .modelType.Fields}} 项)</span>
        </div>
        <div class="card-bd" style="padding:4px 18px 14px">
          {{range $f := .modelType.Fields}}
          <div class="fg" style="border-bottom:1px solid #f1f5f9;padding:12px 0;margin:0;{{if eq $f.Type "images"}}border-bottom:none{{end}}">
            <label style="display:block;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px">
              {{$f.Label}}{{if eq $f.Required 1}}<span class="text-danger" style="margin-left:2px">*</span>{{end}}
              {{if $f.HelpText}}<span class="text-xs text-muted" style="margin-left:8px;font-weight:400">({{$f.HelpText}})</span>{{end}}
            </label>
            {{$fieldKey := printf "field_%d" $f.ID}}
            {{$curVal := $f.DefaultVal}}
            {{range $.article.ArticleContents}}
              {{if eq .FieldKey $fieldKey}}{{$curVal = .Value}}{{end}}
            {{end}}

          {{if eq $f.Type "text"}}
          <input type="text" name="{{$fieldKey}}" class="fctrl" {{if eq $f.Required 1}}required{{end}} placeholder="{{$f.Placeholder}}" value="{{$curVal}}">

          {{else if eq $f.Type "textarea"}}
          <textarea name="{{$fieldKey}}" class="fctrl" {{if eq $f.Required 1}}required{{end}} placeholder="{{$f.Placeholder}}" rows="3" style="resize:vertical">{{$curVal}}</textarea>

          {{else if eq $f.Type "radio"}}
          <div class="flex flex-wrap gap-2">
            {{range $opt := split $f.Options "\n"}}
            {{$pair := split $opt "="}}
            <label class="opt-item" style="display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-size:13px;background:#fff;transition:all .15s;user-select:none">
              <input type="radio" name="{{$fieldKey}}" value="{{index $pair 1}}" {{if eq $f.Required 1}}required{{end}} {{if eq $curVal (index $pair 1)}}checked{{end}} style="accent-color:var(--primary)">
              <span>{{index $pair 0}}</span>
            </label>
            {{end}}
          </div>

          {{else if eq $f.Type "checkbox"}}
          <div class="flex flex-wrap gap-2">
            {{$vals := split $curVal ","}}
            {{range $opt := split $f.Options "\n"}}
            {{$pair := split $opt "="}}
            <label class="opt-item" style="display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;font-size:13px;background:#fff;transition:all .15s;user-select:none">
              <input type="checkbox" name="{{$fieldKey}}" value="{{index $pair 1}}" {{range $v := $vals}}{{if eq $v (index $pair 1)}}checked{{end}}{{end}} style="accent-color:var(--primary)">
              <span>{{index $pair 0}}</span>
            </label>
            {{end}}
          </div>

          {{else if eq $f.Type "select"}}
          <select name="{{$fieldKey}}" class="fctrl" {{if eq $f.Required 1}}required{{end}}>
            <option value="">请选择</option>
            {{range $opt := split $f.Options "\n"}}
            {{$pair := split $opt "="}}
            <option value="{{index $pair 1}}" {{if eq $curVal (index $pair 1)}}selected{{end}}>{{index $pair 0}}</option>
            {{end}}
          </select>

          {{else if eq $f.Type "date"}}
          <input type="text" name="{{$fieldKey}}" class="fctrl datepicker" {{if eq $f.Required 1}}required{{end}} value="{{$curVal}}" placeholder="选择日期" readonly style="max-width:200px">

          {{else if eq $f.Type "file"}}
          <div class="flex gap-2" style="align-items:center;max-width:480px">
            <input type="text" name="{{$fieldKey}}" class="fctrl flex-1" id="file_{{$f.ID}}" {{if eq $f.Required 1}}required{{end}} value="{{$curVal}}" placeholder="上传文件" readonly style="background:#fff;cursor:default">
            <button type="button" class="btn btn-sm btn-info" onclick="uploadFieldFile('file_{{$f.ID}}')">选择文件</button>
            {{if $curVal}}<button type="button" class="btn btn-sm btn-ghost" onclick="document.getElementById('file_{{$f.ID}}').value='';var lk=this.closest('.flex').nextSibling;lk&&lk.remove()">清除</button>{{end}}
          </div>
          {{if $curVal}}<div class="text-xs mt-1" style="color:var(--primary)"><a href="{{$curVal}}" target="_blank" style="text-decoration:none">📎 {{$curVal}}</a></div>{{end}}

          {{else if eq $f.Type "image"}}
          <div class="flex gap-2" style="align-items:center;max-width:480px">
            <input type="text" name="{{$fieldKey}}" class="fctrl flex-1" id="img_{{$f.ID}}" value="{{$curVal}}" placeholder="上传图片" readonly style="background:#fff;cursor:default">
            <button type="button" class="btn btn-sm btn-info" onclick="uploadFieldImage('img_{{$f.ID}}','prev_{{$f.ID}}')">选择图片</button>
            {{if $curVal}}<button type="button" class="btn btn-sm btn-ghost" onclick="document.getElementById('img_{{$f.ID}}').value='';var p=document.getElementById('prev_{{$f.ID}}');p.src='';p.style.display='none'">清除</button>{{end}}
          </div>
          <div id="prev_{{$f.ID}}" style="margin-top:8px;{{if not $curVal}}display:none{{end}}">
            <img src="{{$curVal}}" style="max-width:160px;max-height:120px;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 4px rgba(0,0,0,.06);object-fit:cover" onerror="this.parentNode.style.display='none'">
          </div>

          {{else if eq $f.Type "images"}}
          <div class="images-upload-wrap" id="images_wrap_{{$f.ID}}" style="border:2px dashed #d1d5db;border-radius:8px;padding:14px;background:#fafafa;transition:border-color .2s">
            <input type="hidden" name="{{$fieldKey}}" id="images_{{$f.ID}}" value="{{$curVal}}">
            <div class="flex flex-wrap gap-2" id="images_preview_{{$f.ID}}" style="margin-bottom:10px">
              {{range $url := split $curVal ","}}
              {{if $url}}
              <div class="images-item" style="position:relative;width:88px;height:88px;border-radius:6px;overflow:hidden;border:1px solid #e2e8f0;background:#fff">
                <img src="{{$url}}" style="width:100%;height:100%;object-fit:cover">
                <div class="images-item-del" style="position:absolute;top:3px;right:3px;width:20px;height:20px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;line-height:1;opacity:0;transition:opacity .15s" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0" onclick="removeImagesItem(this,'{{$f.ID}}','{{$url}}')">&times;</div>
              </div>
              {{end}}
              {{end}}
            </div>
            <div class="dropzone-upload" id="dropzone_{{$f.ID}}" style="min-height:72px;border:2px dashed #d1d5db;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;font-size:13px;gap:4px;transition:all .2s" onclick="document.getElementById('dropzone_input_{{$f.ID}}').click()">
              <span style="font-size:22px;line-height:1">+</span>
              <span>点击或拖拽上传图片</span>
              <input type="file" id="dropzone_input_{{$f.ID}}" accept="image/*" multiple style="display:none" onchange="uploadImages(this,'{{$f.ID}}')">
            </div>
          </div>

          {{else if eq $f.Type "editor"}}
          <textarea name="{{$fieldKey}}" class="fctrl" {{if eq $f.Required 1}}required{{end}} rows="6" style="resize:vertical;font-family:ui-monospace,monospace;font-size:13px">{{$curVal}}</textarea>

          {{else}}
          <input type="text" name="{{$fieldKey}}" class="fctrl" {{if eq $f.Required 1}}required{{end}} placeholder="{{$f.Placeholder}}" value="{{$curVal}}">
          {{end}}
        </div>
        {{end}}
      </div>
      </div>
      {{end}}
      <div class="fg">
        <label>文章内容</label>
        <script id="editor" type="text/plain" style="min-height:450px;border-radius:var(--radius-xs)">{{safeHTML .article.Content}}</script>
        <textarea id="content" name="content" style="display:none">{{safeHTML .article.Content}}</textarea>
      </div>
      <div class="flex gap-2" style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="{{.backURL}}" class="btn btn-ghost">取消</a>
      </div>
    </form>
  </div>
</div>
<script>
function clearThumbImage(){
  document.getElementById('thumbUrl').value = '';
  document.getElementById('thumbPreview').src = '';
  document.getElementById('thumbImageWrap').style.display = 'none';
}
function uploadThumb(){
  var i=document.createElement('input');i.type='file';i.accept='image/*';
  i.onchange=function(){
    var f=new FormData();f.append('file',this.files[0]);
    fetch('/admin/upload',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.code===0){
          document.getElementById('thumbUrl').value=d.data.url;
          var img=document.getElementById('thumbPreview');
          img.src=d.data.url;img.style.display='block';
          document.getElementById('thumbImageWrap').style.display='inline-block';
          toast('上传成功','success')
        }else{toast(d.msg,'error')}});
  };i.click();
}
function uploadFieldImage(inputId,prevId){
  var i=document.createElement('input');i.type='file';i.accept='image/*';
  i.onchange=function(){
    var f=new FormData();f.append('file',this.files[0]);
    fetch('/admin/upload',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.code===0){document.getElementById(inputId).value=d.data.url;var p=document.getElementById(prevId);p.src=d.data.url;p.style.display='block';toast('上传成功','success')}
        else{toast(d.msg,'error')}});
  };i.click();
}
function uploadFieldFile(inputId){
  var i=document.createElement('input');i.type='file';
  i.onchange=function(){
    var f=new FormData();f.append('file',this.files[0]);
    fetch('/admin/upload',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.code===0){document.getElementById(inputId).value=d.data.url;toast('上传成功','success')}
        else{toast(d.msg,'error')}});
  };i.click();
}
function uploadImages(input,fieldId){
  var files=input.files;if(!files.length)return;
  (function uploadNext(idx){
    if(idx>=files.length){input.value='';return}
    var f=new FormData();f.append('file',files[idx]);
    fetch('/admin/upload',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.code===0){
          var url=d.data.url;
          var hid=document.getElementById('images_'+fieldId);
          var vals=hid.value?hid.value.split(','):[];
          vals.push(url);hid.value=vals.join(',');
          var wrap=document.getElementById('images_preview_'+fieldId);
          var div=document.createElement('div');
          div.className='images-item';
          div.style.cssText='position:relative;width:100px;height:100px;border-radius:6px;overflow:hidden;border:1px solid #e5e7eb';
          div.innerHTML='<img src="'+url+'" style="width:100%;height:100%;object-fit:cover"><div class="images-item-del" style="position:absolute;top:2px;right:2px;width:22px;height:22px;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;line-height:1" onclick="removeImagesItem(this,\''+fieldId+'\',\''+url+'\')">&times;</div>';
          wrap.appendChild(div);
        }
        uploadNext(idx+1);
      })
      .catch(function(){uploadNext(idx+1)});
  })(0);
}
function removeImagesItem(el,fieldId,url){
  el.parentNode.remove();
  var hid=document.getElementById('images_'+fieldId);
  var vals=hid.value?hid.value.split(','):[];
  hid.value=vals.filter(function(v){return v!=url}).join(',');
}
// Drag-drop support for images upload areas
document.querySelectorAll('.dropzone-upload').forEach(function(el){
  el.addEventListener('dragover',function(e){e.preventDefault();this.style.borderColor='var(--primary)';this.style.background='#eef2ff'});
  el.addEventListener('dragleave',function(e){e.preventDefault();this.style.borderColor='#d1d5db';this.style.background=''});
  el.addEventListener('drop',function(e){
    e.preventDefault();this.style.borderColor='#d1d5db';this.style.background='';
    var input=this.querySelector('input[type="file"]');if(input){input.files=e.dataTransfer.files;input.dispatchEvent(new Event('change'))}
  });
});
</script>
<script src="/static/ueditor-plus/ueditor.config.js"></script>
<script src="/static/ueditor-plus/ueditor.all.js"></script>
<script src="/static/lib/flatpickr/flatpickr.min.js"></script>
<script src="/static/lib/flatpickr/zh.js"></script>
<script>
flatpickr.localize(flatpickr.l10ns.zh);
document.querySelectorAll('.datepicker').forEach(function(el){flatpickr(el,{dateFormat:'Y-m-d',allowInput:true})});
</script>
<script>
var ue=UE.getEditor('editor',{serverHeaders:{'X-CSRF-Token':window._csrf||''}}),ca=document.getElementById('content');
ue.addListener('contentChange',function(){ca.value=ue.getContent()});
ue.ready(function(){ue.setContent(ca.value||'')});
document.getElementById('articleForm').addEventListener('submit',function(e){
  e.preventDefault();ca.value=ue.getContent();
  var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/article/save',{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){toast(d.msg,d.code===0?'success':'error');if(d.code===0)setTimeout(function(){window.location.href=d.redirect||'{{.backURL}}'},600);else{btn.disabled=false;btn.textContent='保存'}});
});
</script>
    </div>
  </div>

</body>
</html>