{{define "user/alert_settings.html"}}
{{template "user/layout_head" .}}
<link href="{{asset "/assets/css/submit-toc.css"}}" rel="stylesheet">
<div class="ut-shell-page ut-shell-page--narrow">
{{template "user_pagehead" (dict "Icon" "bx-bell" "Title" (Tp "user_alert_settings" "user_alert_settings_title") "Desc" (Tp "user_alert_settings" "user_alert_settings_desc"))}}

<div id="alertFormErr" class="alert alert-danger alert-dismissible fade show py-2 mb-3 d-none" role="alert">
  <span id="alertFormErrText"></span>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{if index .Data "Error"}}
<div id="alertFormErrServer" class="alert alert-danger alert-dismissible fade show py-2 mb-3" role="alert">
  {{index .Data "Error"}}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{end}}

<form method="post" id="alertSettingsForm" class="ut-inline-form ut-settings-stack">

  <div class="ut-section" id="alert-sec-recovery">
    <div class="ut-section__head">
      <div class="ut-section__head-icon ut-section__head-icon--green"><i class="bx bx-check-circle"></i></div>
      <div class="ut-section__head-text">
        <h2 class="ut-section__head-title">{{Tp "user_alert_settings" "field_notify_recovery_section_title"}}</h2>
        <p class="ut-section__head-sub mb-0">{{Tp "user_alert_settings" "field_notify_recovery_hint"}}</p>
      </div>
    </div>
    <div class="ut-section__body">
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" name="notify_on_recovery" value="1" id="nr" {{if eq (asInt (index .Data.Settings "notify_on_recovery")) 1}}checked{{end}}>
        <label class="form-check-label fw-medium" for="nr">{{Tp "user_alert_settings" "field_notify_recovery"}}</label>
      </div>
    </div>
  </div>

  <div class="ut-section" id="alert-sec-mail">
    <div class="ut-section__head">
      <div class="ut-section__head-icon ut-section__head-icon--sky"><i class="bx bx-envelope"></i></div>
      <div class="ut-section__head-text">
        <h2 class="ut-section__head-title">{{Tp "user_alert_settings" "field_mail_section_title"}}</h2>
      </div>
    </div>
    <div class="ut-section__body">
      <div class="ut-form-group">
        <div class="form-check mb-0">
          <input type="checkbox" class="form-check-input" name="alert_enabled" value="1" id="ae" {{if eq (asInt (index .Data.Settings "alert_enabled")) 1}}checked{{end}}>
          <label class="form-check-label fw-medium" for="ae">{{Tp "user_alert_settings" "field_alert_enabled"}}</label>
        </div>
      </div>
      <div class="ut-form-group">
        <label class="form-label" for="alertEmail">{{Tp "user_alert_settings" "field_alert_email"}}</label>
        <input type="email" name="alert_email" id="alertEmail" class="form-control nc-privacy-input" data-privacy-kind="email" data-privacy-placeholder-kind="email" data-privacy-placeholder-full="{{index .Data.Settings "email"}}" value="{{index .Data.Settings "alert_email"}}" placeholder="{{maskEmail (index .Data.Settings "email")}}">
        <div class="form-text">{{Tp "user_alert_settings" "field_alert_email_hint"}}</div>
      </div>
      <div class="ut-form-note mt-3 mb-0">
        <i class="bx bx-bar-chart-alt-2"></i>
        <div>
          {{Tp "user_alert_settings" "field_report_moved_hint"}}
          {{if editionHasReports}}<a href="/user/settings/reports">{{Tp "user_sidebar" "nav_report_settings"}}</a>{{end}}
        </div>
      </div>
    </div>
  </div>

  {{if index .Data "DingTalkEnabled"}}
  <div class="ut-section" id="alert-sec-dingtalk">
    <div class="ut-section__head">
      <div class="ut-section__head-icon ut-section__head-icon--amber"><i class="bx bx-message-rounded-dots"></i></div>
      <div class="ut-section__head-text">
        <h2 class="ut-section__head-title">{{Tp "user_alert_settings" "field_dingtalk_section_title"}}</h2>
      </div>
    </div>
    <div class="ut-section__body">
      <div class="ut-form-group">
        <div class="form-check mb-0">
          <input type="checkbox" class="form-check-input" name="dingtalk_enabled" value="1" id="de" {{if eq (asInt (index .Data.Settings "dingtalk_enabled")) 1}}checked{{end}}>
          <label class="form-check-label fw-medium" for="de">{{Tp "user_alert_settings" "field_dingtalk_enabled"}}</label>
        </div>
      </div>
      <div class="ut-form-group">
        <div class="ut-form-block">
          <div class="ut-form-block__title">{{Tp "user_alert_settings" "field_dingtalk_webhook"}} / {{Tp "user_alert_settings" "field_dingtalk_secret"}}</div>
          <div class="mb-3">
            <label class="form-label" for="dingtalkWebhook">{{Tp "user_alert_settings" "field_dingtalk_webhook"}}</label>
            <input type="url" name="dingtalk_webhook" id="dingtalkWebhook" class="form-control font-monospace" maxlength="512"
              placeholder="{{if index .Data "DingTalkMask"}}{{index .Data "DingTalkMask"}}{{else}}{{Tp "user_alert_settings" "field_dingtalk_webhook_placeholder"}}{{end}}">
            <div class="form-text">{{Tp "user_alert_settings" "field_dingtalk_webhook_hint"}} <a href="{{imGuideURL}}" target="_blank" rel="noopener">{{imGuideLabel}} <i class="bx bx-link-external" aria-hidden="true" style="font-size:1rem"></i></a></div>
          </div>
          <div class="mb-0">
            <label class="form-label" for="dingtalkSecret">{{Tp "user_alert_settings" "field_dingtalk_secret"}}</label>
            <input type="password" name="dingtalk_secret" id="dingtalkSecret" class="form-control font-monospace" maxlength="128" autocomplete="new-password"
              placeholder="{{if index .Data "HasDingTalkSecret"}}{{Tp "user_alert_settings" "field_dingtalk_secret_keep"}}{{else}}{{Tp "user_alert_settings" "field_dingtalk_secret_placeholder"}}{{end}}">
            <div class="form-text">{{Tp "user_alert_settings" "field_dingtalk_secret_hint"}}</div>
          </div>
        </div>
      </div>
      {{if gt (asInt (index .Data.Settings "dingtalk_verified_at")) 0}}
      <div class="ut-form-group">
        <div class="ut-form-note ut-form-note--success mb-0">
          <i class="bx bx-check-circle"></i>
          <div>{{Tp "user_alert_settings" "field_dingtalk_verified"}}：<span class="js-dingtalk-verified">{{unixTime (index .Data.Settings "dingtalk_verified_at")}}</span></div>
        </div>
      </div>
      {{end}}
      <div class="ut-form-group">
        <button type="button" class="btn btn-outline-primary btn-sm" id="btnDingTalkTest"><i class="bx bx-paper-plane me-1"></i>{{Tp "user_alert_settings" "btn_dingtalk_test"}}</button>
        <span class="small text-muted ms-2" id="dingTalkTestMsg"></span>
      </div>
      <div class="ut-form-note mb-0">
        <i class="bx bx-book-open"></i>
        <div>
          {{Tp "user_alert_settings" "field_dingtalk_help_link_prefix"}}
          <a href="/help/dingtalk" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_dingtalk_help_title"}}</a>
          {{Tp "user_alert_settings" "field_dingtalk_help_link_suffix"}}
        </div>
      </div>
    </div>
  </div>
  {{end}}

  <div class="ut-section mb-4" id="alert-sec-share-password">
    <div class="ut-section__head">
      <div class="ut-section__head-icon"><i class="bx bx-lock-alt"></i></div>
      <div class="ut-section__head-text">
        <h2 class="ut-section__head-title">{{Tp "user_alert_settings" "field_share_password_section_title"}}</h2>
        <p class="ut-section__head-sub mb-0">{{Tp "user_alert_settings" "field_share_password_section_desc"}}</p>
      </div>
    </div>
    <div class="ut-section__body">
      <div class="ut-form-group">
        <label class="form-label" for="alertDetailPassword">{{Tp "user_alert_settings" "field_alert_detail_password"}}</label>
        <input type="password" name="alert_detail_password" id="alertDetailPassword" class="form-control" maxlength="20" autocomplete="new-password"
          placeholder="{{if index .Data "HasAlertDetailPassword"}}{{Tp "user_alert_settings" "field_alert_detail_password_keep"}}{{else}}{{Tp "user_alert_settings" "field_alert_detail_password_placeholder"}}{{end}}">
        <div class="form-text">{{Tp "user_alert_settings" "field_alert_detail_password_hint"}}</div>
      </div>
      {{if index .Data "HasAlertDetailPassword"}}
      <div class="form-check mb-0">
        <input class="form-check-input" type="checkbox" name="alert_detail_password_clear" value="1" id="alertDetailPasswordClear">
        <label class="form-check-label" for="alertDetailPasswordClear">{{Tp "user_alert_settings" "field_alert_detail_password_clear"}}</label>
      </div>
      {{end}}
    </div>
  </div>

  <div class="ut-settings-footer">
    <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "btn_save"}}</button>
  </div>
</form>

<nav id="submit-toc-root" class="cs-submit-toc cs-submit-toc--settings" aria-label="{{T "settings_toc_title"}}" data-toc-storage="netcue_alert_settings_toc">
  <div class="cs-submit-toc__panel">
    <div class="cs-submit-toc__head">
      <span class="cs-submit-toc__head-badge" aria-hidden="true"><i class="bx bx-book-content"></i></span>
      <span class="cs-submit-toc__title">{{T "settings_toc_title"}}</span>
      <i class="cs-submit-toc__drag-grip bx bx-move" title="{{T "settings_toc_drag_tip"}}" aria-hidden="true"></i>
      <button type="button" class="js-submit-toc-min cs-submit-toc__min" aria-expanded="true" title="{{T "settings_toc_toggle"}}" aria-label="{{T "settings_toc_toggle"}}">
        <i class="bx bx-chevron-up toc-min-icon" aria-hidden="true"></i>
      </button>
    </div>
    <ul class="cs-submit-toc__list">
      <li class="cs-submit-toc__item">
        <a href="#alert-sec-recovery" class="cs-submit-toc__link cs-submit-toc__link--green" data-toc-target="alert-sec-recovery">
          <span class="cs-submit-toc__icon" aria-hidden="true"><i class="bx bx-check-circle"></i></span>
          <span class="cs-submit-toc__label">{{Tp "user_alert_settings" "field_notify_recovery_section_title"}}</span>
        </a>
      </li>
      <li class="cs-submit-toc__item">
        <a href="#alert-sec-mail" class="cs-submit-toc__link cs-submit-toc__link--sky" data-toc-target="alert-sec-mail">
          <span class="cs-submit-toc__icon" aria-hidden="true"><i class="bx bx-envelope"></i></span>
          <span class="cs-submit-toc__label">{{Tp "user_alert_settings" "field_mail_section_title"}}</span>
        </a>
      </li>
      {{if index .Data "DingTalkEnabled"}}
      <li class="cs-submit-toc__item">
        <a href="#alert-sec-dingtalk" class="cs-submit-toc__link cs-submit-toc__link--amber" data-toc-target="alert-sec-dingtalk">
          <span class="cs-submit-toc__icon" aria-hidden="true"><i class="bx bx-message-rounded-dots"></i></span>
          <span class="cs-submit-toc__label">{{Tp "user_alert_settings" "field_dingtalk_section_title"}}</span>
        </a>
      </li>
      {{end}}
      <li class="cs-submit-toc__item">
        <a href="#alert-sec-share-password" class="cs-submit-toc__link cs-submit-toc__link--violet" data-toc-target="alert-sec-share-password">
          <span class="cs-submit-toc__icon" aria-hidden="true"><i class="bx bx-lock-alt"></i></span>
          <span class="cs-submit-toc__label">{{Tp "user_alert_settings" "field_share_password_section_title"}}</span>
        </a>
      </li>
    </ul>
  </div>
</nav>
</div>
<script>
$(function(){
  var saveOkMsg = '{{T "save_ok"}}';
  var errorGeneric = '{{T "error_generic"}}';

  function hideFormErr() {
    $('#alertFormErr').addClass('d-none');
    $('#alertFormErrText').text('');
    $('#alertFormErrServer').remove();
  }

  function showFormErr(msg) {
    $('#alertFormErrServer').remove();
    $('#alertFormErrText').text(msg);
    $('#alertFormErr').removeClass('d-none');
  }

  function cleanOkQuery() {
    try {
      var u = new URL(window.location.href);
      if (!u.searchParams.has('ok')) return;
      u.searchParams.delete('ok');
      var qs = u.searchParams.toString();
      history.replaceState(null, '', u.pathname + (qs ? ('?' + qs) : '') + u.hash);
    } catch (e) {}
  }

  {{if index .Data "Ok"}}showUserToast(true, saveOkMsg);{{end}}
  cleanOkQuery();

  $('#alertSettingsForm').on('submit', function(e){
    e.preventDefault();
    hideFormErr();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: '/api/user/settings/alerts',
      type: 'POST',
      data: $form.serialize(),
      dataType: 'json'
    }).done(function(res){
      if (res && res.success) {
        showUserToast(true, (res.data && res.data.message) || saveOkMsg);
        var $sec = $form.find('[name=dingtalk_secret]');
        if ($sec.length && $.trim($sec.val()) !== '') {
          $sec.val('').attr('placeholder', '{{Tp "user_alert_settings" "field_dingtalk_secret_keep"}}');
        }
        var $wh = $form.find('[name=dingtalk_webhook]');
        if ($wh.length && $.trim($wh.val()) !== '') {
          var v = $.trim($wh.val());
          $wh.val('').attr('placeholder', v.length > 24 ? (v.slice(0, 12) + '…' + v.slice(-8)) : v);
        }
        var $dp = $form.find('[name=alert_detail_password]');
        if ($dp.length && $.trim($dp.val()) !== '') {
          $dp.val('').attr('placeholder', '{{Tp "user_alert_settings" "field_alert_detail_password_keep"}}');
          if (!$('#alertDetailPasswordClear').length) {
            $dp.closest('.ut-section__body').append(
              '<div class="form-check mb-0 mt-2"><input class="form-check-input" type="checkbox" name="alert_detail_password_clear" value="1" id="alertDetailPasswordClear">' +
              '<label class="form-check-label" for="alertDetailPasswordClear">{{Tp "user_alert_settings" "field_alert_detail_password_clear"}}</label></div>'
            );
          }
        }
        return;
      }
      showFormErr((res && res.message) || errorGeneric);
    }).fail(function(xhr){
      var msg = errorGeneric;
      try { var j = JSON.parse(xhr.responseText); if (j.message) msg = j.message; } catch(err){}
      showFormErr(msg);
    }).always(function(){
      $btn.prop('disabled', false);
    });
  });

  {{if index .Data "DingTalkEnabled"}}
  $('#btnDingTalkTest').on('click', function(){
    var $btn = $(this).prop('disabled', true);
    var $msg = $('#dingTalkTestMsg').text('{{Tp "user_alert_settings" "dingtalk_test_sending"}}');
    $.ajax({
      url: '/api/user/dingtalk/test',
      type: 'POST',
      dataType: 'json'
    }).done(function(res){
      if (res && res.success) {
        $msg.removeClass('text-danger').addClass('text-success').text('{{Tp "user_alert_settings" "dingtalk_test_ok"}}');
        if (res.data && res.data.verified_at) {
          var t = parseInt(res.data.verified_at, 10);
          if (t > 0) {
            var d = new Date(t * 1000);
            $('.js-dingtalk-verified').text(d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0') + ' ' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0'));
          }
        }
      } else {
        $msg.removeClass('text-success').addClass('text-danger').text((res && res.message) || '{{Tp "user_alert_settings" "error_dingtalk_test_failed"}}');
      }
    }).fail(function(xhr){
      var m = '{{Tp "user_alert_settings" "error_dingtalk_test_failed"}}';
      try { var j = JSON.parse(xhr.responseText); if (j.message) m = j.message; } catch(e){}
      $msg.removeClass('text-success').addClass('text-danger').text(m);
    }).always(function(){
      $btn.prop('disabled', false);
    });
  });
  {{end}}
});
</script>
<script src="{{asset "/assets/js/submit-toc.js"}}"></script>
{{template "user/layout_foot" .}}
{{end}}