{{define "user/embed.html"}}
{{template "user/layout_head" .}}
<link href="{{asset "/assets/css/embed-code.css"}}" rel="stylesheet">
<style>
.sc-embed-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.sc-embed-identity{margin-top:1rem}
.sc-embed-identity .form-label{font-size:.8125rem;font-weight:600;color:#475569}
.sc-embed-identity pre{white-space:pre-wrap;word-break:break-word}
</style>
{{$site := index .Data "Site"}}
{{template "user_pagehead" (dict "Icon" "bx-code-alt" "Title" (T "user.embed.title") "Desc" (printf (T "user.embed.site_prefix") $site.name))}}
{{if index .Data "Ok"}}<div class="alert alert-success py-2 small">{{T "user.embed.ok_saved"}}</div>{{end}}
<div class="card border-0 shadow-sm p-3 p-md-4 mb-3">
  <p class="text-muted small mb-2">{{T "user.embed.hint1_a"}} <code>&lt;/body&gt;</code> {{T "user.embed.hint1_b"}} <code>SupChatSettings.position</code> {{T "user.embed.hint1_c"}}</p>
  <p class="text-muted small mb-2"><i class="bx bx-info-circle me-1"></i>{{T "user.embed.hint2_before"}}<strong>{{T "user.embed.hint2_strong"}}</strong>{{T "user.embed.hint2_after"}}</p>
  <div class="sc-embed-code-wrap">
    <pre class="sc-embed-code" tabindex="0" role="region" aria-label="{{T "user.embed.title"}}"><code id="embedCodeView"></code></pre>
    <textarea class="visually-hidden" id="embedCode" readonly aria-hidden="true">{{index .Data "EmbedCode"}}</textarea>
  </div>
  <div class="sc-embed-actions">
    <button type="button" class="btn btn-primary btn-sm" id="btnCopyEmbed"><i class="bx bx-copy me-1"></i>{{T "user.embed.copy"}}</button>
    {{if index .Data "PreviewURL"}}
    <a class="btn btn-outline-secondary btn-sm" href="{{index .Data "PreviewURL"}}" target="_blank" rel="noopener"><i class="bx bx-link-external me-1"></i>{{T "user.embed.preview"}}</a>
    {{end}}
    <a class="btn btn-link btn-sm ms-md-1" href="/user/sites">{{T "user.embed.back"}}</a>
  </div>
</div>
<div class="card border-0 shadow-sm p-3 p-md-4 sc-embed-identity">
  <div class="fw-semibold mb-2"><i class="bx bx-shield-quarter me-1"></i>{{T "user.sites.identity_section"}}</div>
  <p class="text-muted small mb-3">{{T "user.sites.target_site"}}<strong>{{T "user.sites.server_side"}}</strong>{{T "user.sites.identity_body_mid"}} <code>userId+"\n"+name</code> {{T "user.sites.identity_body_suffix"}}</p>
  <div class="mb-3">
    <label class="form-label" for="embedSiteSecret">{{T "user.sites.site_secret_label"}}</label>
    <div class="input-group input-group-sm">
      <input type="password" class="form-control font-monospace" id="embedSiteSecret" readonly autocomplete="off" value="{{index .Data "SiteSecret"}}">
      <button type="button" class="btn btn-outline-secondary" id="btnToggleEmbedSecret" title="{{T "user.sites.show_hide"}}">{{T "user.sites.show"}}</button>
      <button type="button" class="btn btn-outline-primary" id="btnCopyEmbedSecret">{{T "user.sites.copy"}}</button>
      <button type="button" class="btn btn-outline-danger" id="btnRotateEmbedSecret" title="{{T "user.sites.rotate_title"}}">{{T "user.sites.rotate"}}</button>
    </div>
    <div class="form-text" id="embedSecretHint">{{T "user.sites.secret_algo_hint"}}</div>
    <div class="form-text text-danger" id="embedFormErr"></div>
  </div>
  <pre class="bg-light border rounded p-2 mb-2 small"><code id="embedIdentitySnippet">{{index .Data "IdentitySnippet"}}</code></pre>
  <details class="mb-0">
    <summary class="small text-muted" style="cursor:pointer">{{T "user.sites.server_examples"}}</summary>
    <pre class="bg-light border rounded p-2 mt-2 mb-2 small" style="max-height:12rem;overflow:auto"><code id="embedIdentityPhp">{{index .Data "IdentityPHP"}}</code></pre>
    <pre class="bg-light border rounded p-2 mb-0 small" style="max-height:8rem;overflow:auto"><code id="embedIdentityNode">{{index .Data "IdentityNode"}}</code></pre>
  </details>
</div>
<script src="{{asset "/assets/js/embed-code-highlight.js"}}"></script>
<script>
(function () {
  var siteRef = {{jsString $site.site_ref}};
  if (window.SupChatEmbedCode) {
    SupChatEmbedCode.render('embedCode', 'embedCodeView');
  }
  var btnCopy = document.getElementById('btnCopyEmbed');
  if (btnCopy) {
    var defaultHtml = btnCopy.innerHTML;
    btnCopy.addEventListener('click', function () {
      var text = document.getElementById('embedCode').value;
      var done = function () {
        btnCopy.innerHTML = '<i class="bx bx-check me-1"></i>' + {{jsString (T "user.embed.copied")}};
        btnCopy.classList.add('btn-success');
        btnCopy.classList.remove('btn-primary');
        setTimeout(function () {
          btnCopy.innerHTML = defaultHtml;
          btnCopy.classList.add('btn-primary');
          btnCopy.classList.remove('btn-success');
        }, 1500);
      };
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(done).catch(function () {
          var ta = document.getElementById('embedCode');
          ta.removeAttribute('aria-hidden');
          ta.classList.remove('visually-hidden');
          ta.select();
          document.execCommand('copy');
          ta.classList.add('visually-hidden');
          ta.setAttribute('aria-hidden', 'true');
          done();
        });
      } else {
        var ta = document.getElementById('embedCode');
        ta.select();
        document.execCommand('copy');
        done();
      }
    });
  }
  $('#btnToggleEmbedSecret').on('click', function () {
    var $inp = $('#embedSiteSecret');
    if ($inp.attr('type') === 'password') {
      $inp.attr('type', 'text');
      $(this).text({{jsString (T "user.sites.hide")}});
    } else {
      $inp.attr('type', 'password');
      $(this).text({{jsString (T "user.sites.show")}});
    }
  });
  $('#btnCopyEmbedSecret').on('click', function () {
    var text = $('#embedSiteSecret').val() || '';
    if (!text) return;
    var $btn = $(this);
    var done = function () {
      $btn.text({{jsString (T "user.sites.copied")}});
      setTimeout(function () { $btn.text({{jsString (T "user.sites.copy")}}); }, 1500);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done).catch(function () {
        var $tmp = $('<input>').val(text).appendTo('body').select();
        document.execCommand('copy');
        $tmp.remove();
        done();
      });
    } else {
      done();
    }
  });
  $('#btnRotateEmbedSecret').on('click', function () {
    if (!siteRef) return;
    if (!window.confirm({{jsString (T "user.sites.confirm_rotate")}})) return;
    var $btn = $(this).prop('disabled', true);
    var $err = $('#embedFormErr').text('');
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(siteRef) + '/rotate-secret',
      method: 'POST',
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res.success || !res.data) {
        $err.text(res.message || {{jsString (T "user.sites.err_rotate")}});
        return;
      }
      $('#embedSiteSecret').val(res.data.site_secret || '');
      location.reload();
    }).fail(function (xhr) {
      $err.text((xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_rotate")}});
    }).always(function () {
      $btn.prop('disabled', false);
    });
  });
})();
</script>
{{template "user/layout_foot" .}}
{{end}}