{{define "admin/site_embed.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-page cs-admin-page--narrow">
{{template "admin_flash" .}}

<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-code-block"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.site_embed.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.site_embed.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a href="/admin/config" class="btn btn-sm btn-outline-primary"><i class="bx bx-cog me-1" aria-hidden="true"></i>{{T "admin.site_embed.link_config"}}</a>
  </div>
</header>

<div class="card cs-admin-section">
  <div class="card-body">
    <div class="mb-3">
      <label class="form-label fw-semibold" for="csSiteEmbedMeta">Head Meta HTML</label>
      <p class="small text-muted mb-2">{{T "admin.site_embed.head_hint"}}</p>
      <textarea class="form-control font-monospace" id="csSiteEmbedMeta" rows="5" placeholder='&lt;meta name="google-site-verification" content="..." /&gt;'></textarea>
    </div>
    <div class="mb-3">
      <label class="form-label fw-semibold" for="csSiteEmbedFooter">{{T "admin.site_embed.footer_label"}}</label>
      <p class="small text-muted mb-2">{{T "admin.site_embed.footer_hint"}}</p>
      <textarea class="form-control font-monospace" id="csSiteEmbedFooter" rows="6" placeholder='&lt;script src="https://example.com/chat.js"&gt;&lt;/script&gt;'></textarea>
    </div>
    <button type="button" class="btn btn-primary" id="csSiteEmbedSave"><i class="bx bx-save me-1"></i>{{T "admin.site_embed.save"}}</button>
  </div>
</div>
</div>
<script>
(function
  var Lembed = {
    ok: {{jsString (T "admin.site_embed.ok")}},
    fail: {{jsString (T "admin.site_embed.fail")}},
    net: {{jsString (T "admin.site_embed.net")}}
  };
 () {
  var metaEl = document.getElementById('csSiteEmbedMeta');
  var footEl = document.getElementById('csSiteEmbedFooter');
  var btn = document.getElementById('csSiteEmbedSave');
  function toast(ok, msg) {
    if (window.BootstrapModal && typeof window.BootstrapModal.alert === 'function') {
      window.BootstrapModal.alert(msg, ok ? 'success' : 'danger');
      return;
    }
    alert(msg);
  }
  fetch('/api/admin/site-embed', { credentials: 'same-origin' })
    .then(function (r) { return r.json(); })
    .then(function (j) {
      if (!j || !j.success || !j.data) return;
      metaEl.value = j.data.custom_meta_html || '';
      footEl.value = j.data.custom_footer_html || '';
    })
    .catch(function () {});
  btn.addEventListener('click', function () {
    btn.disabled = true;
    fetch('/api/admin/site-embed', {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        custom_meta_html: metaEl.value,
        custom_footer_html: footEl.value
      })
    })
      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
      .then(function (res) {
        btn.disabled = false;
        if (res.j && res.j.success) {
          toast(true, (res.j.data && res.j.data.message) || Lembed.ok);
          return;
        }
        toast(false, (res.j && res.j.message) || Lembed.fail);
      })
      .catch(function () {
        btn.disabled = false;
        toast(false, Lembed.net);
      });
  });
})();
</script>
{{template "admin_shell_close" .}}
{{end}}