{{define "admin/settings_dingtalk.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-message-rounded-dots" "Title" (T "admin.dingtalk.title") "Desc" (T "admin.dingtalk.desc"))}}
<p class="text-muted small mb-3"><a href="{{imGuideURL}}" target="_blank" rel="noopener">{{imGuideLabel}} <i class="bx bx-link-external" aria-hidden="true" style="font-size:1rem"></i></a></p>

<form method="post" action="/admin/settings/dingtalk" id="dingtalk-settings-form">
  <section id="dingtalk-config" class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-message-rounded-dots"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.dingtalk.section_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.dingtalk.section_sub"}}</p>
      </div>
    </div>
    <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-toggle-left" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.common.basic_switch"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.dingtalk.switch_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="dingtalk_enable">{{T "admin.dingtalk.enable"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="dingtalk_enable" name="dingtalk_enable" value="1" {{if index .Data "DingTalkEnabled"}}checked{{end}} aria-label="{{T "admin.dingtalk.enable"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.dingtalk.enable_hint"}}</div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-timer" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.dingtalk.limits_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.dingtalk.limits_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2">
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.dingtalk.daily_limit"}}</label>
                <input type="number" class="form-control form-control-sm" name="dingtalk_daily_limit_alert" min="0" value="{{index .Data "DailyLimitAlert"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.dingtalk.timeout"}}</label>
                <input type="number" class="form-control form-control-sm" name="dingtalk_timeout_sec" min="3" max="60" value="{{index .Data "TimeoutSec"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.dingtalk.aggregate"}}</label>
                <input type="number" class="form-control form-control-sm" name="dingtalk_aggregate_window_sec" min="0" max="300" value="{{index .Data "AggregateWindowSec"}}">
                <div class="form-text mb-0">{{T "admin.dingtalk.aggregate_hint"}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-message-detail" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.dingtalk.format_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.dingtalk.format_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field">
              <div class="d-flex flex-column gap-2">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="dingtalk_message_format" id="dingtalk_fmt_markdown" value="markdown" {{if ne (index .Data "MessageFormat") "actionCard"}}checked{{end}}>
                  <label class="form-check-label" for="dingtalk_fmt_markdown">
                    <span class="fw-semibold">{{T "admin.dingtalk.fmt_markdown"}}</span>{{T "admin.dingtalk.fmt_markdown_tag"}}
                    <span class="d-block small text-muted fw-normal mt-1">{{T "admin.dingtalk.fmt_markdown_hint"}}</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="dingtalk_message_format" id="dingtalk_fmt_actioncard" value="actionCard" {{if eq (index .Data "MessageFormat") "actionCard"}}checked{{end}}>
                  <label class="form-check-label" for="dingtalk_fmt_actioncard">
                    <span class="fw-semibold">{{T "admin.dingtalk.fmt_actioncard"}}</span>{{T "admin.dingtalk.fmt_actioncard_tag"}}
                    <span class="d-block small text-muted fw-normal mt-1">{{T "admin.dingtalk.fmt_actioncard_hint"}}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-shield-quarter" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.dingtalk.security_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.dingtalk.security_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field">
              <label class="form-label">{{T "admin.dingtalk.allowlist"}}</label>
              <input type="text" class="form-control form-control-sm font-monospace" name="dingtalk_webhook_host_allowlist" value="{{index .Data "WebhookHostAllowlist"}}" placeholder="oapi.dingtalk.com">
              <div class="form-text">{{T "admin.dingtalk.allowlist_hint"}}</div>
            </div>
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="dingtalk_at_all_on_down">{{T "admin.dingtalk.at_all"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="dingtalk_at_all_on_down" name="dingtalk_at_all_on_down" value="1" {{if index .Data "AtAllOnDown"}}checked{{end}} aria-label="{{T "admin.dingtalk.at_all"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.dingtalk.at_all_hint"}}</div>
            </div>
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="dingtalk_allow_insecure_webhook">{{T "admin.dingtalk.allow_http"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="dingtalk_allow_insecure_webhook" name="dingtalk_allow_insecure_webhook" value="1" {{if index .Data "AllowInsecure"}}checked{{end}} aria-label="{{T "admin.dingtalk.allow_http"}}">
                </div>
              </div>
              <div class="form-text mb-0 text-danger">{{T "admin.dingtalk.allow_http_hint"}}</div>
            </div>
          </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.common.save_hint_hot"}}</p>
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.common.save_config"}}</button>
    </div>
  </div>
</form>
</div>
<script>
(function () {
  function cleanOkQuery() {
    try {
      var u = new URL(window.location.href);
      if (!u.searchParams.has('ok')) return;
      showAdminToast(true, {{jsString (T "admin.common.config_saved")}});
      u.searchParams.delete('ok');
      var qs = u.searchParams.toString();
      history.replaceState(null, '', u.pathname + (qs ? ('?' + qs) : '') + u.hash);
    } catch (e) {}
  }

  cleanOkQuery();

  $('#dingtalk-settings-form').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: $form.attr('action'),
      method: 'POST',
      data: $form.serialize(),
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (res && res.success) {
        showAdminToast(true, (res.data && res.data.message) || res.message || {{jsString (T "admin.common.config_saved")}});
      } else {
        showAdminToast(false, (res && res.message) || {{jsString (T "admin.common.save_fail")}});
      }
    }).fail(function (xhr) {
      var msg = {{jsString (T "admin.common.save_fail")}};
      try {
        var j = JSON.parse(xhr.responseText);
        if (j.message) msg = j.message;
      } catch (err) {}
      showAdminToast(false, msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}