{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/friend_link" 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="linkForm">
      <input type="hidden" name="id" value="{{if .is_edit}}{{.link.ID}}{{end}}">
      <div class="fg">
        <label>名称 <span style="color:var(--red)">*</span></label>
        <input type="text" name="name" class="fctrl" value="{{.link.Name}}" placeholder="网站名称">
      </div>
      <div class="fg">
        <label>链接 <span style="color:var(--red)">*</span></label>
        <input type="text" name="url" class="fctrl" value="{{.link.URL}}" placeholder="https://example.com">
      </div>
      <div class="fg">
        <label>Logo</label>
        <div class="ug">
          <input type="text" name="logo" class="fctrl" id="logoInput" value="{{.link.Logo}}" placeholder="上传或输入Logo URL">
          <button type="button" class="btn btn-info" onclick="uploadLogo()">上传</button>
        </div>
        <div id="logoImageWrap" style="display:{{if .link.Logo}}inline-block{{else}}none{{end}};position:relative;max-width:120px;margin-top:8px">
          <img id="logoPreview" src="{{.link.Logo}}" style="max-width:120px;border-radius:6px">
          <button type="button" onclick="clearLogoImage()" 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="fr">
        <div class="fg half">
          <label>排序</label>
          <input type="number" name="sort" class="fctrl" value="{{.link.Sort}}" min="0">
        </div>
        <div class="fg half">
          <label>状态</label>
          <select name="status" class="fctrl">
            <option value="1" {{if eq .link.Status 1}}selected{{end}}>显示</option>
            <option value="0" {{if eq .link.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/friend_link" class="btn btn-ghost">取消</a>
      </div>
    </form>
  </div>
</div>
<script>
function clearLogoImage(){
  document.getElementById('logoInput').value = '';
  document.getElementById('logoPreview').src = '';
  document.getElementById('logoImageWrap').style.display = 'none';
}
function uploadLogo(){
  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('logoInput').value=d.data.url;
          var img=document.getElementById('logoPreview');
          img.src=d.data.url;img.style.display='block';
          document.getElementById('logoImageWrap').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('linkForm').addEventListener('submit',function(e){
  e.preventDefault();
  var urlVal = this.querySelector('[name="url"]').value;
  if (!validateUrl(urlVal)) { toast('链接必须以 http:// 或 https:// 开头', 'error'); return; }
  var logoVal = this.querySelector('[name="logo"]').value;
  if (logoVal && !validateUrl(logoVal)) { toast('Logo 链接必须以 http:// 或 https:// 开头', 'error'); return; }
  var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/friend_link/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/friend_link'},600);else{btn.disabled=false;btn.textContent='保存'}});
});
</script>

</body>
</html>