{{define "user/monitor_form.html"}}
{{template "user/layout_head" .}}
<div class="ut-shell-page ut-shell-page--narrow">
{{if eq (index .Data "FormAction") "edit"}}
  {{template "user_pagehead" (dict "Icon" "bx-edit" "Title" (Tp "user_monitors" "user_monitor_edit_title") "Desc" "")}}
{{else}}
  {{template "user_pagehead" (dict "Icon" "bx-plus-circle" "Title" (Tp "user_monitors" "user_monitor_add_title") "Desc" "")}}
{{end}}

<div class="ut-section">
  <div class="ut-section__head">
    <div class="ut-section__head-icon"><i class="bx bx-cog"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{Tp "user_monitors" "field_url"}}</h2>
      <p class="ut-section__head-sub">HTTP / HTTPS</p>
    </div>
  </div>
  <div class="ut-section__body">
    <form id="monitorForm" class="ut-inline-form">
      <div class="mb-3"><label class="form-label">{{Tp "user_monitors" "field_name"}}</label><input type="text" name="name" class="form-control" required maxlength="128" value="{{with index .Data "Monitor"}}{{.name}}{{end}}"></div>
      <div class="mb-3"><label class="form-label">{{Tp "user_monitors" "field_url"}}</label><input type="url" name="url" class="form-control" required placeholder="https://example.com" value="{{with index .Data "Monitor"}}{{.url}}{{end}}"></div>
      <div class="row g-2">
        <div class="col-md-6 mb-3"><label class="form-label">{{Tp "user_monitors" "field_interval"}}</label>
          <select name="interval_sec" class="form-select">
            {{range index .Data "IntervalChoices"}}
            <option value="{{.}}">{{formatInterval .}}</option>
            {{end}}
          </select>
        </div>
        <div class="col-md-6 mb-3"><label class="form-label">{{Tp "user_monitors" "field_expected_status"}}</label><input type="number" name="expected_status" class="form-control" value="{{with index .Data "Monitor"}}{{.expected_status}}{{else}}200{{end}}"></div>
      </div>
      <div class="row g-2">
        <div class="col-md-6 mb-3">
          <label class="form-label">{{Tp "user_monitors" "field_method"}}</label>
          <select name="method" class="form-select">
            <option value="GET" {{with index .Data "Monitor"}}{{if eq .method "GET"}}selected{{end}}{{end}}>GET</option>
            <option value="HEAD" {{with index .Data "Monitor"}}{{if eq .method "HEAD"}}selected{{end}}{{end}}>HEAD</option>
          </select>
          <div class="form-text">{{Tp "user_monitors" "field_method_hint"}}</div>
        </div>
        <div class="col-md-6 mb-3"><label class="form-label">{{Tp "user_monitors" "field_timeout"}}</label><input type="number" name="timeout_sec" class="form-control" min="5" max="60" value="{{with index .Data "Monitor"}}{{.timeout_sec}}{{else}}{{index .Data "DefaultTimeout"}}{{end}}"></div>
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" name="follow_redirects" value="1" id="fr" {{with index .Data "Monitor"}}{{if eq (asInt .follow_redirects) 1}}checked{{end}}{{else}}checked{{end}}>
        <label class="form-check-label" for="fr">{{Tp "user_monitors" "field_follow_redirects"}}</label>
      </div>
      <div id="formErr" class="alert alert-danger d-none py-2"></div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "btn_save"}}</button>
        <a href="/user/monitors" class="btn btn-outline-secondary btn-sm">{{T "btn_cancel"}}</a>
      </div>
    </form>
  </div>
</div>
</div>
<script>
$(function(){
  {{if eq (index .Data "FormAction") "edit"}}
  $('[name=interval_sec]').val('{{index (index .Data "Monitor") "interval_sec"}}');
  {{end}}
  $('#monitorForm').on('submit', function(e){
    e.preventDefault();
    var data = {
      name: $('[name=name]').val(),
      url: $('[name=url]').val(),
      interval_sec: parseInt($('[name=interval_sec]').val(),10),
      expected_status: parseInt($('[name=expected_status]').val(),10),
      method: $('[name=method]').val(),
      timeout_sec: parseInt($('[name=timeout_sec]').val(),10),
      follow_redirects: $('[name=follow_redirects]').is(':checked')
    };
    var url = '/api/user/monitors';
    var method = 'POST';
    {{if eq (index .Data "FormAction") "edit"}}
    url = '/api/user/monitors/{{index .Data "MonitorRef"}}';
    method = 'PUT';
    {{end}}
    $.ajax({
      url: url, type: method, contentType: 'application/json',
      data: JSON.stringify(data),
      success: function(res){
        if(res.success && res.data.redirect){ location.href = res.data.redirect; return; }
        if(res.success){ location.href = '/user/monitors'; return; }
        $('#formErr').removeClass('d-none').text(res.message||'{{T "error_generic"}}');
      },
      error: function(xhr){
        var msg = '{{T "error_request_failed"}}';
        try{ msg = JSON.parse(xhr.responseText).message; }catch(e){}
        $('#formErr').removeClass('d-none').text(msg);
      }
    });
  });
});
</script>
{{template "user/layout_foot" .}}
{{end}}