{{define "public/oauth_bind_card"}}
{{if .Data}}{{if index .Data "OAuthReady"}}
<div class="card mt-3 oauth-bind-card" id="user-oauth-bind">
    <div class="card-body">
        <h3 class="h6 mb-2"><i class="bx bx-link-alt me-1"></i>{{T "oauth.bind_title"}}</h3>
        <p class="text-muted small mb-2">{{T "oauth.bind_hint"}}</p>
        <div id="oauthBindFlash" class="mb-2"></div>
        <div class="d-flex flex-wrap align-items-center gap-2">
            {{if index .Data "OAuthLinked"}}
            <span class="text-success" id="oauthBindStatus"><i class="bx bx-check-circle"></i> {{T "oauth.status_linked"}}{{if index .Data "OAuthProvider"}} — {{index .Data "OAuthProvider"}}{{end}}</span>
            <button type="button" class="btn btn-outline-danger btn-sm" id="btnOAuthUnlink">{{T "oauth.unlink_action"}}</button>
            {{else}}
            <span class="text-muted" id="oauthBindStatus">{{T "oauth.status_none"}}</span>
            <button type="button" class="btn btn-primary btn-sm" id="btnOAuthBind" data-href="{{index .Data "OAuthBindStartURL"}}">{{T "oauth.bind_action"}}</button>
            {{end}}
        </div>
    </div>
</div>
<script>
(function ($) {
  var oauthI18n = {
    unlinkConfirm: {{jsString (T "oauth.unlink_confirm")}},
    unlinkOk: {{jsString (T "oauth.unlink_ok")}},
    bindOk: {{jsString (T "oauth.bind_ok")}},
    binding: {{jsString (T "oauth.binding")}},
    unlinking: {{jsString (T "oauth.unlinking")}},
    failed: {{jsString (T "oauth.err_failed")}}
  };
  function oauthFlash(msg, ok) {
    var $box = $('#oauthBindFlash');
    if (!$box.length || !msg) return;
    $box.html('<div class="alert alert-' + (ok ? 'success' : 'danger') + ' py-2 mb-0"></div>');
    $box.find('.alert').text(msg);
  }
  function oauthStripQ() {
    if (!window.history || !window.history.replaceState) return;
    var u = new URL(window.location.href);
    if (!u.searchParams.has('oauth_link') && !u.searchParams.has('oauth_err')) return;
    u.searchParams.delete('oauth_link');
    u.searchParams.delete('oauth_err');
    var q = u.searchParams.toString();
    window.history.replaceState({}, '', u.pathname + (q ? ('?' + q) : '') + (u.hash || ''));
  }
  function oauthLoad() {
    if (window.BootstrapModal && typeof window.BootstrapModal.load === 'function') return window.BootstrapModal.load();
    if (window.layer && typeof window.layer.load === 'function') return window.layer.load(2);
    return null;
  }
  function oauthClose(id) {
    if (id == null) return;
    if (window.BootstrapModal && typeof window.BootstrapModal.close === 'function') { window.BootstrapModal.close(id); return; }
    if (window.layer && typeof window.layer.close === 'function') window.layer.close(id);
  }
  {{if index .Data "OAuthBindOk"}}
  $(function () {
    BootstrapModal.msg(oauthI18n.bindOk, {icon: 1});
    oauthFlash(oauthI18n.bindOk, true);
    oauthStripQ();
  });
  {{end}}
  {{if index .Data "OAuthErrMsg"}}
  $(function () {
    var errMsg = {{jsString (index .Data "OAuthErrMsg")}};
    BootstrapModal.msg(errMsg, {icon: 2});
    oauthFlash(errMsg, false);
    oauthStripQ();
  });
  {{end}}
  $('#btnOAuthBind').on('click', function () {
    var href = $(this).attr('data-href');
    if (!href) return;
    $(this).prop('disabled', true);
    oauthFlash(oauthI18n.binding, true);
    oauthLoad();
    window.setTimeout(function () { window.location.href = href; }, 120);
  });
  $('#btnOAuthUnlink').on('click', function () {
    var runUnlink = function () {
      var $btn = $('#btnOAuthUnlink').prop('disabled', true);
      oauthFlash(oauthI18n.unlinking, true);
      var lid = oauthLoad();
      $.ajax({
        url: '/api/user/oauth/unlink',
        type: 'POST',
        dataType: 'json',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      }).done(function (res) {
        oauthClose(lid);
        if (res && res.success) {
          BootstrapModal.msg(res.message || oauthI18n.unlinkOk, {icon: 1});
          oauthFlash(res.message || oauthI18n.unlinkOk, true);
          window.setTimeout(function () { window.location.reload(); }, 450);
        } else {
          $btn.prop('disabled', false);
          var m = (res && res.message) || oauthI18n.failed;
          BootstrapModal.msg(m, {icon: 2});
          oauthFlash(m, false);
        }
      }).fail(function (xhr) {
        oauthClose(lid);
        $btn.prop('disabled', false);
        var m = (xhr.responseJSON && xhr.responseJSON.message) || oauthI18n.failed;
        BootstrapModal.msg(m, {icon: 2});
        oauthFlash(m, false);
      });
    };
    var Modal = window.BootstrapModal || window.POModal || window.SupfileModal || window.myModal || window.layer;
    if (Modal && typeof Modal.confirm === 'function') {
      Modal.confirm(oauthI18n.unlinkConfirm, { icon: 3 }).then(function (ok) { if (ok) runUnlink(); });
    }
  });
})(jQuery);
</script>
{{end}}{{end}}
{{end}}