{{define "user/site_notify.html"}}
{{template "user/layout_head" .}}
<style>
.sc-notify-intro{margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--ut-border,#e2e8f0)}
.sc-notify-intro__title{margin:0 0 .45rem;font-size:.9375rem;font-weight:600;color:#1e293b;line-height:1.55;letter-spacing:-.01em}
.sc-notify-intro__title strong{color:var(--ut-primary,#2563eb);font-weight:700}
.sc-notify-intro__desc{margin:0;font-size:.8125rem;line-height:1.55;color:var(--ut-text-hint,#94a3b8)}
.sc-notify-intro__desc i{font-size:1rem;vertical-align:-.1em;margin-right:.2rem}
.sc-notify-form-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.15rem}
.sc-notify-tabs .nav-link{font-size:.8125rem;padding:.35rem .75rem}
.sc-notify-tab-pane{padding-top:.75rem}
.sc-notify-tab-pane .form-label{font-size:.8125rem;font-weight:600;color:#475569;margin-bottom:.25rem}
.sc-notify-tab-pane .form-control{font-size:.8125rem;padding:.35rem .55rem;line-height:1.45}
.sc-notify-tab-pane .form-check-label{font-size:.8125rem}
.sc-notify-tab-pane .mb-3{margin-bottom:.65rem!important}
.sc-notify-tab-pane .form-text{font-size:.75rem;margin-top:.2rem}
.sc-notify-when__title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:#64748b}
.sc-notify-advanced{margin-top:0}
.sc-notify-advanced__head{display:flex;align-items:flex-start;gap:.65rem;flex-wrap:wrap;margin-top:.85rem;padding-top:.75rem;border-top:1px dashed var(--ut-border,#e2e8f0)}
.sc-notify-advanced__head--static{align-items:center}
.sc-notify-advanced__label{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;font-size:.8125rem;font-weight:600;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px}
.sc-notify-advanced__hint{flex:1;min-width:min(100%,14rem);margin:0;font-size:.75rem;line-height:1.55}
.sc-notify-advanced__hint strong{font-weight:600}
.sc-notify-advanced__panel{margin-top:.65rem;padding:.75rem .85rem;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid #e2e8f0;border-radius:10px}
.sc-notify-advanced__section-title{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b}
.sc-notify-advanced__section + .sc-notify-advanced__section{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed #e2e8f0}
.sc-notify-fmt{margin-top:0}
.sc-notify-fmt__title{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b}
.sc-notify-fmt__opt{margin-bottom:.45rem;padding:.45rem .55rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px}
.sc-notify-fmt__opt:last-child{margin-bottom:0}
.sc-notify-fmt__opt .form-check-label{font-size:.8125rem}
.sc-notify-fmt__hint{display:block;margin:.15rem 0 0 1.35rem;font-size:.75rem;line-height:1.45;color:#94a3b8}
.sc-notify-kw{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .85rem;padding:.55rem .7rem;background:#fffbeb;border:1px solid #fde68a;border-radius:8px}
.sc-notify-kw__icon{flex-shrink:0;margin-top:.1rem;font-size:1.05rem;color:#d97706}
.sc-notify-kw__body{min-width:0;font-size:.8125rem;line-height:1.5;color:#78350f}
.sc-notify-kw__body strong{font-weight:700;color:#92400e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sc-notify-kw__label{display:block;margin-bottom:.15rem;font-size:.75rem;font-weight:600;color:#a16207}
</style>
{{$site := index .Data "Site"}}
{{template "user_pagehead" (dict "Icon" "bx-bell" "Title" (T "user.sites.im_alert") "Desc" (printf (T "user.sites.notify.page_desc") $site.name))}}
{{if index .Data "Ok"}}<div class="alert alert-success py-2 small">{{T "user.sites.ok_notify"}}</div>{{end}}
{{if index .Data "Err"}}<div class="alert alert-danger py-2 small">{{index .Data "Err"}}</div>{{end}}
<div class="card border-0 shadow-sm p-3 p-md-4 mb-3">
  <div class="sc-notify-intro">
    <h2 class="sc-notify-intro__title">{{T "user.sites.notify.intro_title"}} <a href="/agent" target="_blank" rel="noopener">{{T "user.sites.agent_desk"}}</a></h2>
    <p class="sc-notify-intro__desc"><i class="bx bx-info-circle"></i>{{T "user.sites.notify.intro_desc"}}</p>
    <p class="sc-notify-intro__desc mt-1"><i class="bx bx-key"></i>{{T "user.sites.notify.keyword_intro"}} <strong>{{T "user.sites.notify.keyword_value"}}</strong></p>
  </div>
  <form method="post" id="notifyForm">
    <ul class="nav nav-tabs sc-notify-tabs" role="tablist">
      <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#paneDing" type="button">{{T "user.sites.channel_dingtalk"}}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#paneFeishu" type="button">{{T "user.sites.channel_feishu"}}</button></li>
      <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#paneTelegram" type="button">Telegram</button></li>
    </ul>
    <div class="tab-content sc-notify-tab-pane">
      <div class="tab-pane fade show active" id="paneDing">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="dingtalk_enabled" value="1" id="dtEnabled" {{if index .Data "DingTalkEnabled"}}checked{{end}}>
          <label class="form-check-label" for="dtEnabled">{{T "user.sites.enable_dingtalk"}}</label>
        </div>
        <div class="sc-notify-kw" role="note">
          <i class="bx bx-key sc-notify-kw__icon" aria-hidden="true"></i>
          <div class="sc-notify-kw__body">
            <span class="sc-notify-kw__label">{{T "user.sites.notify.keyword_label"}}</span>
            {{T "user.sites.notify.keyword_tip_prefix"}} <strong>{{T "user.sites.notify.keyword_value"}}</strong>{{T "user.sites.notify.keyword_tip_suffix"}}
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">Webhook URL</label>
          <input type="url" name="dingtalk_webhook" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "DingTalkWebhookMask"}}{{index .Data "DingTalkWebhookMask"}}{{else}}https://oapi.dingtalk.com/robot/send?access_token=...{{end}}" value="">
          <div class="form-text small">{{if index .Data "DingTalkHasWebhook"}}{{T "user.sites.webhook_configured"}}{{end}}</div>
        </div>
        <div class="mb-3">
          <label class="form-label">{{T "user.sites.ding_secret_label"}}</label>
          <input type="password" name="dingtalk_secret" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "DingTalkHasSecret"}}{{T "user.sites.secret_configured"}}{{else}}{{T "user.sites.ph_sec"}}{{end}}" autocomplete="new-password">
        </div>
        <div class="small text-muted mb-3">
          <a href="/help/dingtalk?site_ref={{$site.site_ref}}" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_dingtalk_help_title"}}</a>
        </div>
        <div class="sc-notify-advanced">
          <div class="sc-notify-advanced__head sc-notify-advanced__head--static">
            <span class="sc-notify-advanced__label">{{T "user.sites.advanced"}}</span>
            <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.ding_hint"}}</div>
          </div>
          <div class="sc-notify-advanced__panel">
            <div class="sc-notify-advanced__section">
              <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
              <div class="row g-2">
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_timeout_sec" min="3" max="60" value="{{index .Data "DingTalkTimeoutSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_rate_limit" min="1" max="120" value="{{index .Data "DingTalkRateLimit"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_cooldown_sec" min="10" max="600" value="{{index .Data "DingTalkCooldownSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_merge_window_sec" min="0" max="120" value="{{index .Data "DingTalkMergeWindowSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.notify.snooze_label"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_takeover_snooze_minutes" min="1" max="120" value="{{index .Data "DingTalkSnoozeMinutes"}}"></div>
              </div>
            </div>
            <div class="sc-notify-advanced__section sc-notify-fmt">
              <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="dingtalk_message_format" id="dtFmtMd" value="markdown" {{if eq (index .Data "DingTalkMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="dtFmtMd">Markdown</label>
                </div>
                <span class="sc-notify-fmt__hint">{{T "user.sites.notify.ding_fmt_md"}}</span>
              </div>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="dingtalk_message_format" id="dtFmtCard" value="actionCard" {{if ne (index .Data "DingTalkMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="dtFmtCard">ActionCard <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                </div>
                <span class="sc-notify-fmt__hint">{{T "user.sites.notify.ding_fmt_card"}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="paneFeishu">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="feishu_enabled" value="1" id="fsEnabled" {{if index .Data "FeishuEnabled"}}checked{{end}}>
          <label class="form-check-label" for="fsEnabled">{{T "user.sites.enable_feishu"}}</label>
        </div>
        <div class="sc-notify-kw" role="note">
          <i class="bx bx-key sc-notify-kw__icon" aria-hidden="true"></i>
          <div class="sc-notify-kw__body">
            <span class="sc-notify-kw__label">{{T "user.sites.notify.keyword_label"}}</span>
            {{T "user.sites.notify.keyword_tip_prefix"}} <strong>{{T "user.sites.notify.keyword_value"}}</strong>{{T "user.sites.notify.keyword_tip_suffix"}}
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">Webhook URL</label>
          <input type="url" name="feishu_webhook" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "FeishuWebhookMask"}}{{index .Data "FeishuWebhookMask"}}{{else}}https://open.feishu.cn/open-apis/bot/v2/hook/...{{end}}" value="">
          <div class="form-text small">{{if index .Data "FeishuHasWebhook"}}{{T "user.sites.webhook_configured"}}{{end}}</div>
        </div>
        <div class="mb-3">
          <label class="form-label">{{T "user.sites.feishu_secret_label"}}</label>
          <input type="password" name="feishu_secret" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "FeishuHasSecret"}}{{T "user.sites.secret_configured"}}{{else}}{{T "user.sites.ph_bot_secret"}}{{end}}" autocomplete="new-password">
        </div>
        <div class="small text-muted mb-3">
          <a href="/help/feishu?site_ref={{$site.site_ref}}" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_feishu_help_title"}}</a>
        </div>
        <div class="sc-notify-advanced">
          <div class="sc-notify-advanced__head sc-notify-advanced__head--static">
            <span class="sc-notify-advanced__label">{{T "user.sites.advanced"}}</span>
            <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.feishu_hint"}}</div>
          </div>
          <div class="sc-notify-advanced__panel">
            <div class="sc-notify-advanced__section">
              <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
              <div class="row g-2">
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_timeout_sec" min="3" max="60" value="{{index .Data "FeishuTimeoutSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="feishu_rate_limit" min="1" max="120" value="{{index .Data "FeishuRateLimit"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_cooldown_sec" min="10" max="600" value="{{index .Data "FeishuCooldownSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_merge_window_sec" min="0" max="120" value="{{index .Data "FeishuMergeWindowSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.notify.snooze_label"}}</label><input type="number" class="form-control form-control-sm" name="feishu_takeover_snooze_minutes" min="1" max="120" value="{{index .Data "FeishuSnoozeMinutes"}}"></div>
              </div>
            </div>
            <div class="sc-notify-advanced__section sc-notify-fmt">
              <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="feishu_message_format" id="fsFmtMd" value="markdown" {{if eq (index .Data "FeishuMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="fsFmtMd">Markdown</label>
                </div>
                <span class="sc-notify-fmt__hint">{{T "user.sites.notify.feishu_fmt_md"}}</span>
              </div>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="feishu_message_format" id="fsFmtCard" value="interactive" {{if ne (index .Data "FeishuMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="fsFmtCard">Interactive <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                </div>
                <span class="sc-notify-fmt__hint">{{T "user.sites.notify.feishu_fmt_card"}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="paneTelegram">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="telegram_enabled" value="1" id="tgEnabled" {{if index .Data "TelegramEnabled"}}checked{{end}}>
          <label class="form-check-label" for="tgEnabled">{{T "user.sites.enable_telegram"}}</label>
        </div>
        <div class="mb-3">
          <label class="form-label">Bot Token</label>
          <input type="password" name="telegram_bot_token" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "TelegramHasBotToken"}}{{index .Data "TelegramBotTokenMask"}}{{else}}123456789:AA...{{end}}" autocomplete="new-password">
          <div class="form-text small">{{if index .Data "TelegramHasBotToken"}}{{T "user.sites.bot_token_configured"}}{{end}}</div>
        </div>
        <div class="mb-3">
          <label class="form-label">Chat ID</label>
          <input type="text" name="telegram_chat_id" class="form-control form-control-sm font-monospace" placeholder="{{if index .Data "TelegramHasChatID"}}{{index .Data "TelegramChatIDMask"}}{{else}}-1001234567890{{end}}">
          <div class="form-text small">{{if index .Data "TelegramHasChatID"}}{{T "user.sites.chat_id_configured"}}{{end}}</div>
        </div>
        <div class="small text-muted mb-3">
          <a href="/help/telegram?site_ref={{$site.site_ref}}" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_telegram_help_title"}}</a>
        </div>
        <div class="sc-notify-advanced">
          <div class="sc-notify-advanced__head sc-notify-advanced__head--static">
            <span class="sc-notify-advanced__label">{{T "user.sites.advanced"}}</span>
            <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.telegram_hint_short"}}</div>
          </div>
          <div class="sc-notify-advanced__panel">
            <div class="sc-notify-advanced__section">
              <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
              <div class="row g-2">
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_timeout_sec" min="3" max="60" value="{{index .Data "TelegramTimeoutSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="telegram_rate_limit" min="1" max="120" value="{{index .Data "TelegramRateLimit"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_cooldown_sec" min="10" max="600" value="{{index .Data "TelegramCooldownSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_merge_window_sec" min="0" max="120" value="{{index .Data "TelegramMergeWindowSec"}}"></div>
                <div class="col-6 col-md-4"><label class="form-label">{{T "user.sites.notify.snooze_label"}}</label><input type="number" class="form-control form-control-sm" name="telegram_takeover_snooze_minutes" min="1" max="120" value="{{index .Data "TelegramSnoozeMinutes"}}"></div>
              </div>
            </div>
            <div class="sc-notify-advanced__section sc-notify-fmt">
              <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="telegram_message_format" id="tgFmtHtml" value="html" {{if ne (index .Data "TelegramMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="tgFmtHtml">HTML <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                </div>
              </div>
              <div class="sc-notify-fmt__opt">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="telegram_message_format" id="tgFmtMd" value="markdown" {{if eq (index .Data "TelegramMessageFormat") "markdown"}}checked{{end}}>
                  <label class="form-check-label fw-semibold" for="tgFmtMd">Markdown</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sc-notify-form-actions mt-3">
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "user.sites.save"}}</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" id="btnTestDing"><i class="bx bx-send me-1"></i>{{T "user.sites.notify.test_ding"}}</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" id="btnTestFeishu"><i class="bx bx-send me-1"></i>{{T "user.sites.notify.test_feishu"}}</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" id="btnTestTelegram"><i class="bx bx-send me-1"></i>{{T "user.sites.notify.test_telegram"}}</button>
      <a href="/user/sites?notify={{$site.site_ref}}" class="btn btn-link btn-sm ms-md-1">{{T "user.sites.notify.back_sites"}}</a>
    </div>
  </form>
</div>
<div class="card border-0 shadow-sm p-3">
  <h6 class="sc-notify-when__title">{{T "user.sites.when_push"}}</h6>
  <ul class="small text-muted mb-0">
    <li>{{T "user.sites.notify.when_1"}}</li>
    <li>{{T "user.sites.notify.when_2_short"}}</li>
    <li>{{T "user.sites.notify.when_4_short"}}</li>
  </ul>
</div>
{{template "user/layout_foot" .}}
<script>
window.addEventListener('load', function () {
  function testChannel(channel) {
    $.post('/api/user/sites/{{$site.site_ref}}/notify/test', { channel: channel }, function (res) {
      alert(res.success ? ((res.data && res.data.message) || {{jsString (T "user.sites.ok_test_msg")}}) : (res.message || {{jsString (T "user.sites.err_send")}}));
    }).fail(function (xhr) {
      var m = {{jsString (T "user.sites.err_send")}};
      try { m = JSON.parse(xhr.responseText).message || m; } catch (e) {}
      alert(m);
    });
  }
  $('#btnTestDing').on('click', function () { testChannel('dingtalk'); });
  $('#btnTestFeishu').on('click', function () { testChannel('feishu'); });
  $('#btnTestTelegram').on('click', function () { testChannel('telegram'); });
});
</script>
{{end}}