{{define "user/integrations.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-plug" "Title" (T "user.integrations.title") "Desc" (T "user.integrations.desc"))}}
<div class="row g-3">
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm p-3 mb-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h6 fw-bold mb-0">API Keys</h2>
        <button type="button" class="btn btn-sm btn-primary" id="btnNewKey">{{T "user.integrations.gen_key"}}</button>
      </div>
      <p class="small text-muted">{{T "user.integrations.header_hint"}}<code>Authorization: Bearer sc_xxx</code> / <code>X-API-Key</code></p>
      <p class="small text-muted mb-2">{{T "user.integrations.example"}}<code>GET /api/v1/sessions</code> · <code>GET /api/v1/sessions/{id}/messages</code></p>
      <div id="newKeyBox" class="alert alert-success d-none small"></div>
      <ul class="list-group list-group-flush">
        {{range index .Data "APIKeys"}}
        <li class="list-group-item px-0 d-flex justify-content-between">
          <span>{{.name}} <code>{{.key_prefix}}…</code></span>
          <button type="button" class="btn btn-sm btn-outline-danger" data-del-key="{{.id}}">{{T "user.integrations.delete"}}</button>
        </li>
        {{else}}
        <li class="list-group-item px-0 text-muted">{{T "user.integrations.no_keys"}}</li>
        {{end}}
      </ul>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm p-3">
      <h2 class="h6 fw-bold">{{T "user.integrations.webhook_title"}}</h2>
      <div class="mb-2"><input class="form-control form-control-sm" id="hookName" placeholder="{{T "user.integrations.ph_name"}}"></div>
      <div class="mb-2"><input class="form-control form-control-sm" id="hookURL" placeholder="https://example.com/hook"></div>
      <div class="mb-2"><input class="form-control form-control-sm" id="hookSecret" placeholder="{{T "user.integrations.ph_secret"}}"></div>
      <div class="mb-2"><input class="form-control form-control-sm" id="hookEvents" value="message.new,session.created"></div>
      <button type="button" class="btn btn-sm btn-primary mb-3" id="btnSaveHook">{{T "user.integrations.add_hook"}}</button>
      <ul class="list-group list-group-flush">
        {{range index .Data "Webhooks"}}
        <li class="list-group-item px-0">
          <div class="d-flex justify-content-between">
            <div>
              <strong>{{.name}}</strong>
              <div class="small text-muted text-break">{{.url}}</div>
              <div class="small">{{T "user.integrations.events_prefix"}}{{.events}} · {{T "user.integrations.status_prefix"}} {{.last_status}}</div>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger" data-del-hook="{{.id}}">{{T "user.integrations.delete"}}</button>
          </div>
        </li>
        {{else}}
        <li class="list-group-item px-0 text-muted">{{T "user.integrations.no_hooks"}}</li>
        {{end}}
      </ul>
    </div>
  </div>
</div>
<script>
(function () {
  $('#btnNewKey').on('click', function () {
    $.ajax({
      url: '/api/user/api-keys', method: 'POST', contentType: 'application/json',
      data: JSON.stringify({ name: 'API Key' }),
      success: function (res) {
        if (!res.success) { alert(res.message || {{jsString (T "user.integrations.fail")}}); return; }
        $('#newKeyBox').removeClass('d-none').text({{jsString (T "user.integrations.copy_once_prefix")}} + res.data.api_key + {{jsString (T "user.integrations.copy_once_suffix")}});
        setTimeout(function () { location.reload(); }, 2500);
      }
    });
  });
  $('[data-del-key]').on('click', function () {
    var id = $(this).data('del-key');
    $.post('/api/user/api-keys/' + id + '/delete', function () { location.reload(); });
  });
  $('#btnSaveHook').on('click', function () {
    $.ajax({
      url: '/api/user/webhooks', method: 'POST', contentType: 'application/json',
      data: JSON.stringify({
        name: $('#hookName').val(),
        url: $('#hookURL').val(),
        secret: $('#hookSecret').val(),
        events: $('#hookEvents').val(),
        enabled: true
      }),
      success: function (res) {
        if (res.success) location.reload();
        else alert(res.message || {{jsString (T "user.integrations.fail")}});
      }
    });
  });
  $('[data-del-hook]').on('click', function () {
    var id = $(this).data('del-hook');
    $.post('/api/user/webhooks/' + id + '/delete', function () { location.reload(); });
  });
})();
</script>
{{template "user/layout_foot" .}}
{{end}}