{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/slider" class="btn btn-ghost">← 返回列表</a>
</div>
<div class="card" style="max-width:560px">
  <div class="card-hd">{{if .is_edit}}✎ 编辑幻灯片{{else}}＋ 添加幻灯片{{end}}</div>
  <div class="card-bd">
    <form id="slideForm">
      <input type="hidden" name="id" value="{{if .is_edit}}{{.slide.ID}}{{end}}">
      <div class="fg">
        <label>图片</label>
        <div class="ug">
          <input type="text" name="image" class="fctrl" id="slideImage" value="{{.slide.Image}}" placeholder="上传或输入图片URL">
          <button type="button" class="btn btn-info" onclick="uploadSlide()">上传</button>
        </div>
        <div id="slideImageWrap" style="display:{{if .slide.Image}}inline-block{{else}}none{{end}};position:relative;max-width:200px;margin-top:8px">
          <img id="slidePreview" src="{{.slide.Image}}" style="max-width:200px;border-radius:6px">
          <button type="button" onclick="clearSlideImage()" 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>标题</label>
        <input type="text" name="title" class="fctrl" value="{{.slide.Title}}" placeholder="幻灯片标题">
      </div>
      <div class="fg">
        <label>链接</label>
        <input type="text" name="link" class="fctrl" value="{{.slide.Link}}" placeholder="点击跳转链接">
      </div>
      <div class="fg">
        <label>分组</label>
        <div class="ug">
          <input type="text" name="group" class="fctrl" id="slideGroup" value="{{.slide.Group}}" placeholder="输入分组名称，留空为 default">
          <button type="button" class="btn btn-ghost" onclick="document.getElementById('slideGroup').value=''">重置</button>
        </div>
        <div style="margin-top:4px;display:flex;flex-wrap:wrap;gap:4px">
          {{range .groups}}<span class="badge badge-indigo" style="cursor:pointer;font-size:11px" onclick="document.getElementById('slideGroup').value='{{.}}'">{{.}}</span>{{end}}
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>排序</label>
          <input type="number" name="sort" class="fctrl" value="{{.slide.Sort}}" min="0">
        </div>
        <div class="fg half">
          <label>状态</label>
          <select name="status" class="fctrl">
            <option value="1" {{if eq .slide.Status 1}}selected{{end}}>显示</option>
            <option value="0" {{if eq .slide.Status 0}}selected{{end}}>隐藏</option>
          </select>
        </div>
      </div>
      <div class="flex gap-2" style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/admin/slider" class="btn btn-ghost">取消</a>
      </div>
    </form>
  </div>
</div>
<script>
function clearSlideImage(){
  document.getElementById('slideImage').value = '';
  document.getElementById('slidePreview').src = '';
  document.getElementById('slideImageWrap').style.display = 'none';
}
function uploadSlide(){
  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('slideImage').value=d.data.url;
          var img=document.getElementById('slidePreview');
          img.src=d.data.url;img.style.display='block';
          document.getElementById('slideImageWrap').style.display='inline-block';
          toast('上传成功','success')
        }else{toast(d.msg,'error')}});
  };i.click()
}
function validateUrl(u) {
  if (!u) return true;
  try { var p = new URL(u); return p.protocol === 'http:' || p.protocol === 'https:'; }
  catch(e) { return false; }
}
document.getElementById('slideForm').addEventListener('submit',function(e){
  e.preventDefault();
  var linkVal = this.querySelector('[name="link"]').value;
  if (linkVal && !validateUrl(linkVal)) { toast('链接必须以 http:// 或 https:// 开头', 'error'); return; }
  var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/slider/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/slider'},600);else{btn.disabled=false;btn.textContent='保存'}});
});
</script>

</body>
</html>