{{define "admin/settings_monitor.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-radar" "Title" (T "admin.monitor.title") "Desc" (T "admin.monitor.desc"))}}

<form method="post" action="/admin/settings/monitor" id="monitor-settings-form">
  <section id="monitor-config" class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon"><i class="bx bx-radar"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.monitor.section_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.monitor.section_sub"}}</p>
      </div>
      <span class="badge text-bg-light ms-auto">Worker</span>
    </div>
    <div class="cs-admin-section__body">
      {{with index .Data "Monitor"}}
      <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.monitor.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="monitor_worker_enabled">{{T "admin.monitor.enable_worker"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="monitor_worker_enabled" name="monitor_worker_enabled" value="1" {{if .WorkerEnabled}}checked{{end}} aria-label="{{T "admin.monitor.enable_worker"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.monitor.enable_worker_hint"}}</div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-radar" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.monitor.params_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.monitor.params_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.monitor.default_interval"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_default_interval_sec" min="60" value="{{.DefaultIntervalSec}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.min_interval"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_min_interval_sec" min="60" value="{{.MinIntervalSec}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.default_timeout"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_default_timeout_sec" min="5" value="{{.DefaultTimeoutSec}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.max_per_user"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_max_monitors_per_user" min="1" value="{{.MaxMonitorsPerUser}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.log_retention"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_log_retention_days" min="1" value="{{.LogRetentionDays}}">
                <div class="form-text">{{T "admin.monitor.log_retention_hint"}}</div>
              </div>
            </div>
            <div class="cs-admin-field">
              <label class="form-label">User-Agent</label>
              <input type="text" class="form-control form-control-sm" name="monitor_user_agent" value="{{.UserAgent}}">
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-bell" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.monitor.alert_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.monitor.alert_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.monitor.alert_max_mails"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_alert_max_down_mails" min="1" max="20" value="{{index $.Data "AlertMaxDownMails"}}">
                <div class="form-text">{{T "admin.monitor.alert_max_mails_hint"}}</div>
              </div>
              <div class="col-12 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.alert_intervals"}}</label>
                <input type="text" class="form-control form-control-sm font-monospace" name="monitor_alert_reminder_intervals" value="{{index $.Data "AlertReminderIntervalsText"}}" placeholder="180,360,600,1800,3600">
                <div class="form-text">{{T "admin.monitor.alert_intervals_hint"}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-cog" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.monitor.perf_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.monitor.perf_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.monitor.scheduler_tick"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_scheduler_tick_sec" min="5" value="{{.SchedulerTickSec}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.batch_size"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_batch_size" min="1" value="{{.BatchSize}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.monitor.max_concurrent"}}</label>
                <input type="number" class="form-control form-control-sm" name="monitor_max_concurrent_probes" min="1" max="200" value="{{.MaxConcurrentProbes}}">
                <div class="form-text">{{T "admin.monitor.max_concurrent_hint"}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{end}}
    </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 ($) {
  $('#monitor-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 && j.message) msg = j.message;
      } catch (err) {}
      showAdminToast(false, msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  });
})(jQuery);
</script>
{{template "admin/layout_foot" .}}
{{end}}