{{define "admin/site_embed.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-code-block" "Title" (T "admin.embed.title") "Desc" (T "admin.embed.desc"))}}

<section class="cs-admin-section">
  <div class="cs-admin-section__body">
    <div class="cs-admin-settings-groups">
      <div class="cs-admin-settings-group">
        <div class="cs-admin-settings-group__head">
          <i class="bx bx-code-alt" aria-hidden="true"></i>
          <div class="cs-admin-settings-group__head-text">
            <h3 class="cs-admin-settings-group__title">{{T "admin.embed.meta_title"}}</h3>
            <p class="cs-admin-settings-group__desc">{{T "admin.embed.meta_desc"}}</p>
          </div>
        </div>
        <div class="cs-admin-settings-group__body">
          <textarea class="form-control form-control-sm font-monospace" id="customMetaHtml" rows="5" maxlength="8192" spellcheck="false" placeholder='&lt;meta name="google-site-verification" content="..." /&gt;'></textarea>
        </div>
      </div>
      <div class="cs-admin-settings-group">
        <div class="cs-admin-settings-group__head">
          <i class="bx bx-code-block" aria-hidden="true"></i>
          <div class="cs-admin-settings-group__head-text">
            <h3 class="cs-admin-settings-group__title">{{T "admin.embed.footer_title"}}</h3>
            <p class="cs-admin-settings-group__desc">{{T "admin.embed.footer_desc"}}</p>
          </div>
        </div>
        <div class="cs-admin-settings-group__body">
          <textarea class="form-control form-control-sm font-monospace" id="customFooterHtml" rows="6" maxlength="32768" spellcheck="false" placeholder='&lt;script src="https://example.com/chat.js"&gt;&lt;/script&gt;'></textarea>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="cs-admin-savebar mt-4">
  <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle me-1"></i>{{T "admin.embed.save_hint"}}</p>
  <div class="d-flex gap-2 ms-auto">
    <button type="button" class="btn btn-primary btn-sm" id="btnSaveSiteEmbed"><i class="bx bx-save me-1"></i>{{T "admin.embed.save_btn"}}</button>
  </div>
</div>
</div>
<script>
(function () {
  function loadEmbed() {
    $.getJSON('/api/admin/site-embed', function (res) {
      if (res.success && res.data) {
        $('#customMetaHtml').val(res.data.custom_meta_html || '');
        $('#customFooterHtml').val(res.data.custom_footer_html || '');
      } else if (window.SupfileModal) {
        SupfileModal.alert(res.message || {{jsString (T "admin.embed.load_fail")}}, { icon: 2 });
      }
    }).fail(function () {
      if (window.SupfileModal) SupfileModal.alert({{jsString (T "admin.embed.load_fail")}}, { icon: 2 });
    });
  }
  $('#btnSaveSiteEmbed').on('click', function () {
    var $btn = $(this).prop('disabled', true);
    $.ajax({
      url: '/api/admin/site-embed',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        custom_meta_html: $('#customMetaHtml').val(),
        custom_footer_html: $('#customFooterHtml').val()
      }),
      success: function (res) {
        if (res.success) {
          if (window.SupfileModal) SupfileModal.alert(res.message || {{jsString (T "admin.embed.save_ok")}}, { icon: 1 });
          loadEmbed();
        } else if (window.SupfileModal) {
          SupfileModal.alert(res.message || {{jsString (T "admin.embed.save_fail")}}, { icon: 2 });
        }
      },
      error: function (xhr) {
        var msg = {{jsString (T "admin.embed.save_fail")}};
        try { var r = JSON.parse(xhr.responseText); if (r.message) msg = r.message; } catch (e) {}
        if (window.SupfileModal) SupfileModal.alert(msg, { icon: 2 });
      },
      complete: function () { $btn.prop('disabled', false); }
    });
  });
  loadEmbed();
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}