{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/category" class="btn btn-ghost">← 返回列表</a>
</div>
<div class="card" style="max-width:680px">
  <div class="card-hd">{{if .is_edit}}✎ 编辑栏目{{else}}＋ 添加栏目{{end}}</div>
  <div class="card-bd">
    <form id="categoryForm">
      <input type="hidden" name="id" value="{{.cat.ID}}">
      <div class="fg">
        <label>栏目名称</label>
        <input type="text" name="name" class="fctrl" value="{{.cat.Name}}" placeholder="请输入栏目名称" required>
      </div>
      <div class="fg">
        <label>URL 别名</label>
        <input type="text" name="alias" class="fctrl" value="{{.cat.Alias}}" placeholder="英文或拼音，用于URL访问">
      </div>
      <div class="fg">
        <label>跳转链接</label>
        <input type="text" name="redirect_url" class="fctrl" value="{{.cat.RedirectUrl}}" placeholder="若填写，点击栏目将直接跳转此链接（完整URL）">
        <div class="hint">留空则正常显示栏目内容；填写后点击栏目将直接跳转至该链接</div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>上级栏目</label>
          <select name="parent_id" class="fctrl">
            <option value="">作为顶级栏目</option>
            {{range .parents}}
            <option value="{{.Category.ID}}" {{if eq $.parent_id .Category.ID}}selected{{end}}>{{range seq .Depth}}├─ {{end}}{{.Category.Name}}</option>
            {{end}}
          </select>
        </div>
        <div class="fg half">
          <label>排序</label>
          <input type="number" name="sort" class="fctrl" value="{{.cat.Sort}}">
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>类型</label>
          <select name="cat_type" class="fctrl" id="catType">
            <option value="list" {{if eq .cat.Type "page"}}{{else}}selected{{end}}>列表（可发表多篇文章）</option>
            <option value="page" {{if eq .cat.Type "page"}}selected{{end}}>单页（自动生成同名页面）</option>
          </select>
        </div>
        <div class="fg half">
          <label>状态</label>
          <select name="status" class="fctrl">
            <option value="1" {{if eq .cat.Status 1}}selected{{end}}>启用</option>
            <option value="0" {{if eq .cat.Status 0}}selected{{end}}>禁用</option>
          </select>
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>列表模版</label>
          <select name="list_template" class="fctrl">
            <option value="">默认</option>
            {{range .listTemplates}}
            <option value="{{.}}" {{if eq $.cat.ListTemplate .}}selected{{end}}>{{.}}</option>
            {{end}}
          </select>
        </div>
        <div class="fg half">
          <label>详情模版</label>
          <select name="detail_template" class="fctrl">
            <option value="">默认</option>
            {{range .detailTemplates}}
            <option value="{{.}}" {{if eq $.cat.DetailTemplate .}}selected{{end}}>{{.}}</option>
            {{end}}
          </select>
        </div>
      </div>
      <div class="fg">
        <label>模型</label>
        <select name="model_type_id" class="fctrl" required>
          {{range .modelTypes}}
          <option value="{{.ID}}" {{if or (eq $.cat.ModelTypeID .ID) (and (eq $.cat.ModelTypeID 0) (eq .ID 1))}}selected{{end}}>{{.Name}} ({{.DbTableName}})</option>
          {{end}}
        </select>
        <div class="hint">模型决定了栏目的自定义字段</div>
      </div>
      <div class="fg">
        <label>缩略图</label>
        <div class="ug">
          <input type="text" name="image" class="fctrl" id="catImageInput" value="{{.cat.Image}}" placeholder="上传或输入图片URL">
          <button type="button" class="btn btn-info" onclick="uploadCatImage()">上传</button>
        </div>
        <div style="position:relative;display:inline-block;{{if not .cat.Image}}display:none{{end}}" id="catImageWrap">
          <img id="catImagePreview" src="{{.cat.Image}}" style="max-width:200px;margin-top:8px;border-radius:6px;" onerror="this.style.display='none'">
          <button type="button" class="btn btn-danger btn-sm" style="position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0" onclick="clearCatImage()">×</button>
        </div>
      </div>
      <div class="fg">
        <label>Banner 图片</label>
        <div class="ug">
          <input type="text" name="banner" class="fctrl" id="catBannerInput" value="{{.cat.Banner}}" placeholder="上传或输入Banner图片URL">
          <button type="button" class="btn btn-info" onclick="uploadCatBanner()">上传</button>
        </div>
        <div style="position:relative;display:inline-block;{{if not .cat.Banner}}display:none{{end}}" id="catBannerWrap">
          <img id="catBannerPreview" src="{{.cat.Banner}}" style="max-width:200px;margin-top:8px;border-radius:6px;" onerror="this.style.display='none'">
          <button type="button" class="btn btn-danger btn-sm" style="position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0" onclick="clearCatBanner()">×</button>
        </div>
      </div>
      <div class="fg">
        <label>SEO 关键词</label>
        <input type="text" name="keywords" class="fctrl" value="{{.cat.Keywords}}" placeholder="多个关键词用逗号分隔">
      </div>
      <div class="fg">
        <label>SEO 描述</label>
        <textarea name="desc" class="fctrl" rows="2" placeholder="栏目描述">{{.cat.Desc}}</textarea>
      </div>
      <div class="fg">
        <label>栏目描述</label>
        <textarea name="content" class="fctrl" rows="5" placeholder="可选">{{.cat.Content}}</textarea>
      </div>
      <div class="flex gap-2" style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/admin/category" class="btn btn-ghost">取消</a>
      </div>
    </form>
  </div>
</div>
<script>
function clearCatImage(){
  document.getElementById('catImageInput').value = '';
  document.getElementById('catImagePreview').src = '';
  document.getElementById('catImageWrap').style.display = 'none';
}
function clearCatBanner(){
  document.getElementById('catBannerInput').value = '';
  document.getElementById('catBannerPreview').src = '';
  document.getElementById('catBannerWrap').style.display = 'none';
}
function uploadCatBanner(){
  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('catBannerInput').value=d.data.url;
          var img=document.getElementById('catBannerPreview');
          img.src=d.data.url;img.style.display='block';
          document.getElementById('catBannerWrap').style.display='inline-block';
          toast('上传成功','success')
        }else{toast(d.msg,'error')}});
  };i.click()
}
function uploadCatImage(){
  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('catImageInput').value=d.data.url;
          var img=document.getElementById('catImagePreview');
          img.src=d.data.url;img.style.display='block';
          document.getElementById('catImageWrap').style.display='inline-block';
          toast('上传成功','success')
        }else{toast(d.msg,'error')}});
  };i.click()
}
document.getElementById('categoryForm').addEventListener('submit',function(e){
  e.preventDefault();
  var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/category/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='/admin/category'},600);else{btn.disabled=false;btn.textContent='保存'}});
});

// Auto-populate category fields when model type changes
var modelTypeSelect=document.querySelector('select[name="model_type_id"]');
if(modelTypeSelect)modelTypeSelect.addEventListener('change',function(){
  var val=this.value;
  if(!val||val=='0')return;
  fetch('/admin/model_type/json?id='+val)
    .then(function(r){return r.json()})
    .then(function(d){
      if(d.code==0&&d.data){
        // Fill default list template
        if(d.data.default_list_template){
          document.querySelector('select[name="list_template"]').value=d.data.default_list_template;
        }
        // Fill default detail template
        if(d.data.default_detail_template){
          document.querySelector('select[name="detail_template"]').value=d.data.default_detail_template;
        }
        toast('已应用模型缺省值','success');
      }
    });
});
</script>
    </div>
  </div>

</body>
</html>