<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{ site_branding.browser_title }} - 站点设置</title>
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <style>
    * { box-sizing:border-box; }
    body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; background:#f5f5f7; color:#222; }
    a { text-decoration:none; color:inherit; }
    .topbar { background:#111; color:#fff; padding:14px 24px; }
    .topbar-inner, .container { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; }
    .topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .top-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .top-links a, .top-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }
    .container { margin:24px auto 40px; }
    .panel { background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05); padding:24px; margin-bottom:18px; }
    .title { margin:0 0 10px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .field { margin-bottom:16px; }
    .field label { display:block; font-weight:700; margin-bottom:8px; }
    .field input { width:100%; border:1px solid #ddd; border-radius:10px; padding:12px 14px; font-size:14px; }
    .notice { padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; line-height:1.8; }
    .notice.ok { background:#ecfdf5; color:#166534; }
    .notice.err { background:#fef2f2; color:#991b1b; }
    .btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#111; color:#fff; border:none; font-size:14px; cursor:pointer; }
    .btn-light { background:#efefef; color:#222; }
    .icon-preview { width:96px; height:96px; object-fit:cover; border-radius:20px; border:1px solid #e5e5e5; background:#fafafa; }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="top-links">
        <a href="/admin/">管理员主页</a>
        <a href="/admin/merchant-applications">商家审核</a>
        <a href="/admin/wallet-adjustments">钱包调账</a>
        <a href="/admin/site-branding">站点设置</a>
        <a href="/account">用户主页</a>
        <a href="/logout">退出</a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="panel">
      <h1 class="title">站点设置</h1>
      <div class="muted">这里可以修改网站名称、首页头顶名称、浏览器标题和网站图标。</div>
    </div>

    {% if message %}<div class="notice ok">{{ message }}</div>{% endif %}
    {% if error %}<div class="notice err">{{ error }}</div>{% endif %}

    <form class="panel" method="post" enctype="multipart/form-data">
      <div class="field">
        <label>网站名称（顶部品牌名）</label>
        <input type="text" name="site_name" maxlength="40" value="{{ form_data.site_name }}">
      </div>

      <div class="field">
        <label>头顶名称（首页大字）</label>
        <input type="text" name="header_name" maxlength="40" value="{{ form_data.header_name }}">
      </div>

      <div class="field">
        <label>浏览器标题</label>
        <input type="text" name="browser_title" maxlength="60" value="{{ form_data.browser_title }}">
      </div>

      <div class="field">
        <label>当前网站图标</label>
        <img class="icon-preview" src="{{ form_data.favicon_url }}" alt="网站图标">
      </div>

      <div class="field">
        <label>上传新网站图标</label>
        <input type="file" name="favicon_image" accept=".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp">
      </div>

      <div class="btn-row">
        <button class="btn" type="submit">保存设置</button>
        <a class="btn btn-light" href="/">返回首页</a>
      </div>
    </form>
  </div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const maxBytes = 2 * 1024 * 1024;

  document.querySelectorAll("form").forEach(function (form) {
    const fileInput = form.querySelector('input[type="file"][name="favicon_image"]');
    if (!fileInput) return;

    form.addEventListener("submit", function (e) {
      const file = fileInput.files && fileInput.files[0];
      if (!file) return;

      if (file.size > maxBytes) {
        e.preventDefault();
        alert("网站图标文件过大，当前限制为 2 MB。");
        fileInput.value = "";
      }
    });
  });
});
</script>

</body>
</html>
