{{template "layout.html" .}}
<div class="card" style="max-width:640px">
  <style>
  .config-tabs{display:flex;border-bottom:1px solid var(--gray-200);background:var(--gray-50);border-radius:var(--radius) var(--radius) 0 0}
  .config-tab{padding:12px 24px;font-size:14px;font-weight:500;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition);user-select:none}
  .config-tab:hover{color:var(--gray-700);background:var(--gray-100)}
  .config-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:#fff}
  .config-pane{display:none;padding:20px 22px}
  .config-pane.active{display:block}
  .section-hint{font-size:13px;color:var(--gray-400);margin-bottom:16px;line-height:1.6}
  .smtp-test-wrap{display:flex;gap:10px;align-items:flex-end}
  .smtp-test-wrap .fg{flex:1}
  #smtpTestResult{margin-top:10px;padding:10px 14px;border-radius:var(--radius-xs);font-size:13px;display:none}
  #smtpTestResult.success{display:block;background:var(--success-bg);color:var(--success);border:1px solid rgba(16,185,129,.2)}
  #smtpTestResult.fail{display:block;background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
  </style>
  <div class="config-tabs">
    <div class="config-tab active" data-tab="basic">基本设置</div>
    <div class="config-tab" data-tab="email">邮件通知</div>
  </div>
  <div class="card-bd" style="padding:0">
    <form id="systemForm">
      <div class="config-pane active" id="pane-basic">
        <div class="fg">
          <label>默认作者</label>
          <input type="text" name="default_author" class="fctrl" value="{{.default_author}}" placeholder="新增文章时默认的作者名">
        </div>
        <div class="fr">
          <div class="fg half">
            <label>操作日志保留天数</label>
            <input type="number" name="log_retain_days" class="fctrl" value="{{.log_retain_days}}" min="0" placeholder="0 为永久保留">
          </div>
          <div class="fg half">
            <label>访问日志保留天数</label>
            <input type="number" name="visit_log_retain_days" class="fctrl" value="{{.visit_log_retain_days}}" min="0" placeholder="0 为永久保留">
          </div>
        </div>
        <div class="fg" style="border-top:1px solid var(--gray-100);padding-top:16px;margin-top:8px">
          <label style="display:flex;align-items:center;gap:12px;cursor:pointer">
            <input type="checkbox" name="site_status" value="1" {{if eq .site_status 1}}checked{{end}} style="width:18px;height:18px;accent-color:var(--danger)">
            <span style="font-weight:600;font-size:14px">关闭网站</span>
          </label>
          <div class="hint" style="margin-top:4px">开启后，前台所有页面将显示关闭提示，仅管理员可登录后台</div>
        </div>
        <div class="fg">
          <label>关闭提示</label>
          <textarea name="site_closed_msg" class="fctrl" rows="3" placeholder="自定义关闭提示文字（留空使用默认提示）">{{.site_closed_msg}}</textarea>
        </div>
        <div class="fg" style="border-top:1px solid var(--gray-100);padding-top:16px;margin-top:8px">
          <label style="font-weight:600;color:var(--gray-500);font-size:12px;text-transform:uppercase;letter-spacing:.5px">文件上传</label>
        </div>
        <div class="fg">
          <label>允许上传大小（MB）</label>
          <input type="number" name="upload_max_size" class="fctrl" value="{{.upload_max_size}}" min="1" max="1024" placeholder="默认 20">
          <div class="hint" style="margin-top:4px">单个文件最大体积，单位 MB（1-1024）</div>
        </div>
        <div class="fg">
          <label>允许上传类型</label>
          <input type="text" name="upload_allow_exts" class="fctrl" value="{{.upload_allow_exts}}" placeholder=".jpg,.jpeg,.png,.gif,.bmp,.webp,.ico,.doc,.docx,.xls,.xlsx,.pdf,.zip,.rar,.mp4">
          <div class="hint" style="margin-top:4px">允许上传的文件扩展名，多个以逗号隔开（如 .jpg,.png,.zip）</div>
        </div>
      </div>
      <div class="config-pane" id="pane-email">
        <div class="section-hint">配置 SMTP 邮件服务后，当用户提交自定义表单时，系统可自动发送邮件通知到表单指定的收件箱。</div>
        <div class="fg">
          <label>SMTP 服务器</label>
          <input type="text" name="smtp_host" class="fctrl" value="{{.smtp_host}}" placeholder="smtp.example.com">
        </div>
        <div class="fr">
          <div class="fg half">
            <label>SMTP 端口</label>
            <input type="number" name="smtp_port" class="fctrl" value="{{.smtp_port}}" placeholder="25">
          </div>
          <div class="fg half">
            <label>发件人地址</label>
            <input type="text" name="smtp_from" class="fctrl" value="{{.smtp_from}}" placeholder="noreply@example.com">
          </div>
        </div>
        <div class="fr">
          <div class="fg half">
            <label>SMTP 用户名</label>
            <input type="text" name="smtp_user" class="fctrl" value="{{.smtp_user}}" placeholder="user@example.com">
          </div>
          <div class="fg half">
            <label>SMTP 密码</label>
            <input type="password" name="smtp_pass" class="fctrl" value="{{.smtp_pass}}" placeholder="输入密码">
          </div>
        </div>
        <div class="fg">
          <label>SMTP 加密方式</label>
          <select name="smtp_encryption" class="fctrl">
            <option value="none" {{if eq .smtp_encryption "none"}}selected{{end}}>无</option>
            <option value="tls" {{if eq .smtp_encryption "tls"}}selected{{end}}>TLS（推荐）</option>
            <option value="ssl" {{if eq .smtp_encryption "ssl"}}selected{{end}}>SSL</option>
          </select>
        </div>
        <div class="fg" style="border-top:1px solid var(--gray-100);padding-top:16px;margin-top:8px">
          <label>测试邮件接收地址</label>
          <div class="smtp-test-wrap">
            <input type="text" id="smtpTestEmail" class="fctrl" placeholder="输入测试邮箱地址">
            <button type="button" class="btn btn-secondary" id="smtpTestBtn" style="white-space:nowrap;flex-shrink:0">发送测试</button>
          </div>
        </div>
        <div id="smtpTestResult"></div>
      </div>
      <div style="padding:0 22px 20px">
        <button type="submit" class="btn btn-primary">保存配置</button>
      </div>
    </form>
  </div>
</div>
<script>
// ── Tab switching ──
document.querySelectorAll('.config-tab').forEach(function(tab){
  tab.addEventListener('click',function(){
    document.querySelectorAll('.config-tab').forEach(function(t){t.classList.remove('active')});
    document.querySelectorAll('.config-pane').forEach(function(p){p.classList.remove('active')});
    this.classList.add('active');
    document.getElementById('pane-'+this.dataset.tab).classList.add('active');
  });
});
// ── Save form ──
document.getElementById('systemForm').addEventListener('submit',function(e){
  e.preventDefault();var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/config/system',{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){
      btn.disabled=false;btn.textContent='保存配置';
      var ov=document.createElement('div');
      ov.style.cssText='position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif';
      if(d.code===0){
        ov.innerHTML='<div style="background:#fff;border-radius:12px;padding:36px 32px;min-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><div style="font-size:48px;margin-bottom:12px">✅</div><h3 style="margin:0 0 6px;font-size:18px;color:#1e293b">保存成功</h3><p style="margin:0 0 20px;color:#6B7280;font-size:14px">'+d.msg+'</p><button class="btn btn-primary" id="resultOk" style="cursor:pointer">确定</button></div>';
      }else{
        ov.innerHTML='<div style="background:#fff;border-radius:12px;padding:36px 32px;min-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><div style="font-size:48px;margin-bottom:12px">❌</div><h3 style="margin:0 0 6px;font-size:18px;color:#dc2626">保存失败</h3><p style="margin:0 0 20px;color:#6B7280;font-size:14px">'+d.msg+'</p><button class="btn btn-primary" id="resultOk" style="cursor:pointer">确定</button></div>';
      }
      document.body.appendChild(ov);
      document.getElementById('resultOk').onclick=function(){ov.remove()};
      ov.onclick=function(e){if(e.target===ov)ov.remove()};
    })
    .catch(function(){
      btn.disabled=false;btn.textContent='保存配置';
      var ov=document.createElement('div');
      ov.style.cssText='position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif';
      ov.innerHTML='<div style="background:#fff;border-radius:12px;padding:36px 32px;min-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><div style="font-size:48px;margin-bottom:12px">⚠️</div><h3 style="margin:0 0 6px;font-size:18px;color:#dc2626">请求失败</h3><p style="margin:0 0 20px;color:#6B7280;font-size:14px">网络错误，请检查网络连接后重试</p><button class="btn btn-primary" id="resultOk" style="cursor:pointer">确定</button></div>';
      document.body.appendChild(ov);
      document.getElementById('resultOk').onclick=function(){ov.remove()};
      ov.onclick=function(e){if(e.target===ov)ov.remove()};
    });
});
// ── Test SMTP ──
document.getElementById('smtpTestBtn').addEventListener('click',function(){
  var to=document.getElementById('smtpTestEmail').value.trim();
  if(!to){alert('请输入测试邮箱地址');return}
  var btn=this;btn.disabled=true;btn.textContent='发送中…';
  var result=document.getElementById('smtpTestResult');
  result.className='';result.textContent='';
  fetch('/admin/config/system/test_email',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'to='+encodeURIComponent(to)})
    .then(function(r){return r.json()})
    .then(function(d){
      btn.disabled=false;btn.textContent='发送测试';
      result.className=d.code===0?'success':'fail';
      result.textContent=d.msg;
    })
    .catch(function(){
      btn.disabled=false;btn.textContent='发送测试';
      result.className='fail';
      result.textContent='请求失败，请检查网络连接';
    });
});
</script>
    </div>
  </div>
</body>
</html>