{% extends "base.html" %}
{% block title %}{% if monitor %}Edit monitor{% else %}New monitor{% endif %}{% endblock %}
{% block content %}
{% set mode = form.mode or 'uptime' %}
<div class="crumb"><a href="/app">Monitors</a> / {% if monitor %}<a href="/app/monitors/{{ monitor.id }}">{{ monitor.name }}</a> / Edit{% else %}<a href="/app/monitors/new">New</a> / {{ modes[mode][0] }}{% endif %}</div>
<h1>{% if monitor %}Edit {{ modes[mode][0]|lower }} monitor{% else %}New {{ modes[mode][0]|lower }} monitor{% endif %}</h1>
<p class="sub">{{ modes[mode][1] }} · {{ plan.name }} plan: up to {{ plan.monitors }} monitors, checks as often as every {{ plan.min_interval }} min.{% if ws_plan_key == 'free' %} <a href="/app/billing">Upgrade</a>{% endif %}</p>
{% if error %}<div class="flash err">{{ error }}</div>{% endif %}
<form method="post" class="grid g2" style="align-items:start" id="mform">
<input type="hidden" name="csrf" value="{{ csrf }}">
<input type="hidden" name="mode" id="mode" value="{{ mode }}">
<div class="panel">
  <h2>Target</h2>
  {% if not monitor %}<div class="row"><label>Type</label><select onchange="location='/app/monitors/new?mode='+this.value">{% for k, v in modes.items() %}<option value="{{ k }}" {% if k == mode %}selected{% endif %}>{{ v[0] }} · {{ v[1] }}</option>{% endfor %}</select></div>{% endif %}
  <div class="row"><label>Name {% if mode not in ('heartbeat',) %}<span class="muted">(optional)</span>{% endif %}</label><input type="text" name="name" value="{{ form.name or '' }}" placeholder="{% if mode == 'heartbeat' %}Nightly DB backup{% elif mode == 'api' %}Checkout API{% elif mode == 'tcp' %}Postgres primary{% elif mode == 'domain' %}Company domain{% else %}Marketing site{% endif %}"></div>

  {% if mode in ('uptime','api','text','price','keyword','health') %}
  <div class="row"><label>URL</label><input type="text" name="url" value="{{ form.url or '' }}" placeholder="{% if mode == 'health' %}https://app.example.com/health{% else %}https://example.com{% endif %}" required></div>
  {% elif mode == 'tcp' %}
  <div class="row"><label>Host and port</label><input type="text" name="url" value="{{ form.url or '' }}" placeholder="db.example.com:5432" required><div class="help">We open a TCP connection and measure how long it takes. Works for databases, mail servers, SSH, game servers, anything listening on a port.</div></div>
  {% elif mode == 'domain' %}
  <div class="row"><label>Domain</label><input type="text" name="url" value="{{ form.url or '' }}" placeholder="example.com" required><div class="help">We read the registry's RDAP record for the expiry date and registrar, and snapshot A, AAAA, MX, NS, TXT and CNAME records on every check.</div></div>
  <div class="row"><label>Domain expiry alert (days before)</label><input type="number" name="domain_alert_days" min="1" max="365" value="{{ form.domain_alert_days or 30 }}"></div>
  <div class="row"><label>Alert on changes to <span class="muted">(none selected = every record type)</span></label>
    {% for t in ['A','AAAA','MX','NS','TXT','CNAME'] %}<label class="check"><input type="checkbox" name="dns_watch" value="{{ t }}" {% if t in (form.dns_watch or []) %}checked{% endif %}> {{ t }}</label>{% endfor %}
    <div class="help">Tip: untick TXT if a service rotates verification records; MX and NS changes are the ones that hijack email and traffic.</div></div>
  {% elif mode == 'dependency' %}
  <div class="row"><label>Provider</label><select name="provider" id="provider" onchange="document.getElementById('custom-url').style.display=this.value==='custom'?'':'none'">
    {% for slug, p in providers.items() %}<option value="{{ slug }}" {% if form.provider == slug %}selected{% endif %}>{{ p[0] }}</option>{% endfor %}
    <option value="custom" {% if form.provider == 'custom' %}selected{% endif %}>Custom status page URL…</option></select></div>
  <div class="row" id="custom-url" {% if form.provider != 'custom' %}style="display:none"{% endif %}><label>Status page URL</label><input type="text" name="url" value="{{ form.url if form.provider == 'custom' else '' }}" placeholder="https://status.example.com"><div class="help">Any Atlassian Statuspage-powered page works (we read <code class="k">/api/v2/status.json</code>).</div></div>
  <div class="callout">A major or critical incident at the provider marks this monitor down and opens an incident, so your status page can say "third-party issue" instead of "we're broken". Minor issues send a heads-up only.</div>
  {% elif mode == 'heartbeat' %}
  <div class="callout" style="margin-bottom:14px">Your job calls a unique URL when it finishes. If the ping doesn't arrive in time, we alert you. Optionally call <code class="k">/start</code> first to track run duration, and POST the job's output to keep logs.</div>
  <div class="row"><label>Schedule</label>
    <div class="seg" style="margin-bottom:10px"><button type="button" class="{% if not form.schedule_cron %}on{% endif %}" onclick="hbMode('period',this)">Fixed period</button><button type="button" class="{% if form.schedule_cron %}on{% endif %}" onclick="hbMode('cron',this)">Cron expression</button></div>
    <div id="hb-period" {% if form.schedule_cron %}style="display:none"{% endif %}><div class="grid g2"><div class="row"><label>Expected every (minutes)</label><input type="number" name="period_minutes" min="1" value="{{ form.period_minutes or 60 }}"><div class="help">1440 = daily, 60 = hourly.</div></div></div></div>
    <div id="hb-cron" {% if not form.schedule_cron %}style="display:none"{% endif %}><div class="grid g2"><div class="row"><label>Cron expression</label><input type="text" name="schedule_cron" class="mono" value="{{ form.schedule_cron or '' }}" placeholder="0 2 * * *"><div class="help">Same syntax as crontab. We expect a ping after each scheduled time.</div></div>
      <div class="row"><label>Timezone</label><input type="text" name="schedule_tz" value="{{ form.schedule_tz or 'UTC' }}" placeholder="Asia/Kolkata"></div></div></div>
  </div>
  <div class="grid g2">
    <div class="row"><label>Grace period (minutes)</label><input type="number" name="grace_minutes" min="0" value="{{ form.grace_minutes if form.grace_minutes is not none else 10 }}"><div class="help">How late a ping may be before we alert.</div></div>
    <div class="row"><label>Max run time (minutes) <span class="muted">(optional)</span></label><input type="number" name="max_duration_minutes" min="1" value="{{ form.max_duration_minutes or '' }}" placeholder="30"><div class="help">Needs <code class="k">/start</code> pings. Alerts when a run takes longer.</div></div>
  </div>
  {% elif mode == 'flow' %}
  <div class="callout" style="margin-bottom:14px">Steps run in order. Extract values from a response with <code class="k">json:path</code>, <code class="k">header:name</code> or <code class="k">regex:pattern</code>, then use them anywhere later as <code class="k">{{ '{{' }}name{{ '}}' }}</code>. The flow fails at the first failing step.</div>
  <div class="steps" id="steps"></div>
  <div class="actions" style="margin-bottom:12px"><button type="button" class="btn sm" onclick="addStep()">+ Add step</button><button type="button" class="btn ghost sm" onclick="toggleJson()">Edit as JSON</button></div>
  <div class="row" id="json-row" style="display:none"><textarea name="steps" id="steps-json" rows="14" class="mono">{{ form.steps or '' }}</textarea><div class="help">Fields per step: name, method, url, headers, body, expect_status, assertions (one per line), extract, max_latency_ms.</div></div>
  {% endif %}

  {% if mode == 'api' %}
  <div class="grid g2">
    <div class="row"><label>Method</label><select name="method">{% for mth in ['GET','POST','PUT','PATCH','DELETE','HEAD'] %}<option {% if (form.method or 'GET') == mth %}selected{% endif %}>{{ mth }}</option>{% endfor %}</select></div>
    <div class="row"><label>Expected status</label><input type="text" name="expect_status" value="{{ form.expect_status or '2xx' }}" placeholder="2xx"><div class="help">200, 2xx or 200-299</div></div>
  </div>
  <div class="row"><label>Request headers <span class="muted">(optional)</span></label><textarea name="headers" rows="2" class="mono" placeholder="Authorization: Bearer …&#10;Content-Type: application/json">{{ form.headers or '' }}</textarea><div class="help">One per line as <code class="k">Name: value</code>, or a JSON object. Use read-only test credentials.</div></div>
  <div class="row"><label>Request body <span class="muted">(optional)</span></label><textarea name="body" rows="2" class="mono" placeholder='{"query":"ping"}'>{{ form.body or '' }}</textarea></div>
  <div class="row"><label>Assertions <span class="muted">(optional, one per line)</span></label><textarea name="assertions" rows="4" class="mono" placeholder="json status == ok&#10;json data.items[0].id exists&#10;contains &quot;healthy&quot;&#10;header content-type contains json">{{ form.assertions or '' }}</textarea>
    <div class="help"><code class="k">contains text</code> · <code class="k">not_contains text</code> · <code class="k">json path exists</code> · <code class="k">json path == value</code> (also != &lt; &gt; &lt;= &gt;= contains) · <code class="k">header name contains text</code></div></div>
  {% endif %}
  {% if mode == 'health' %}
  <div class="row"><label>Secret header <span class="muted">(optional)</span></label><input type="text" name="health_secret" class="mono" value="{{ form.health_secret or '' }}" placeholder="leave blank to generate"><div class="help">Sent as <code class="k">vigil-health-secret</code> (and <code class="k">oh-dear-health-check-secret</code>) so only we can read the endpoint. Your app returns JSON like <code class="k">{"checkResults":[{"name":"Database","status":"ok"}]}</code>, Laravel Health, Spring Actuator or just <code class="k">{"status":"ok"}</code>.</div></div>
  <div class="row"><label>Extra request headers <span class="muted">(optional)</span></label><textarea name="headers" rows="2" class="mono">{{ form.headers or '' }}</textarea></div>
  {% endif %}
  {% if mode in ('text','price','keyword') %}
  <div class="row"><label>CSS selector <span class="muted">(optional)</span></label><input type="text" name="selector" value="{{ form.selector or '' }}" placeholder=".price, #tenders table, main article"><div class="help">Limit the watch to one part of the page. Leave blank to watch the whole page text.</div></div>
  {% endif %}
  {% if mode == 'price' %}
  <div class="row"><label>Alert when the value…</label>
    <select name="price_rule">
      <option value="any" {% if (form.price_rule or 'any') == 'any' %}selected{% endif %}>changes at all</option>
      <option value="below" {% if form.price_rule == 'below' %}selected{% endif %}>drops below a threshold</option>
      <option value="above" {% if form.price_rule == 'above' %}selected{% endif %}>rises above a threshold</option>
      <option value="pct" {% if form.price_rule == 'pct' %}selected{% endif %}>moves by at least a percentage</option>
    </select></div>
  <div class="row"><label>Threshold</label><input type="text" name="price_threshold" value="{{ form.price_threshold or '' }}" placeholder="49999 or 5 (%)"><div class="help">We read the first number in the selected content.</div></div>
  {% endif %}
  {% if mode == 'keyword' %}
  <div class="row"><label>Keyword(s)</label><input type="text" name="keyword" value="{{ form.keyword or '' }}" placeholder="In stock, Add to cart"><div class="help">Comma-separate several; any match counts.</div></div>
  <div class="row"><label>Alert when it…</label>
    <select name="keyword_rule"><option value="appears" {% if (form.keyword_rule or 'appears') == 'appears' %}selected{% endif %}>appears on the page</option><option value="disappears" {% if form.keyword_rule == 'disappears' %}selected{% endif %}>disappears from the page</option></select></div>
  {% endif %}
  {% if mode in ('uptime','api','text','price','keyword','tcp','health') %}
  <div class="row"><label>Check from {% if plan.private_locations == 0 %}<span class="pill brand">Pro</span>{% endif %}</label>
    <select name="agent_id" {% if plan.private_locations == 0 %}disabled{% endif %}><option value="">Vigil cloud (public internet)</option>{% for ag in agents %}<option value="{{ ag.id }}" {% if form.agent_id == ag.id|string %}selected{% endif %}>Private location: {{ ag.name }}</option>{% endfor %}</select>
    <div class="help">Private locations run the check from an agent inside your network or another region. <a href="/app/locations">Manage locations</a>.</div></div>
  {% endif %}
  <div class="row"><label>Tags <span class="muted">(optional)</span></label><input type="text" name="tags" value="{{ form.tags or '' }}" placeholder="prod, api, client-acme"><div class="help">Comma-separated. Filter the dashboard and scope maintenance windows by tag.</div></div>
</div>

<div class="panel">
  <h2>Schedule, thresholds &amp; alerts</h2>
  {% if mode != 'heartbeat' %}
  <div class="row"><label>Check frequency</label>
    <select name="interval_minutes">
      {% for mi, label in interval_choices %}
      <option value="{{ mi }}" {% if mi < plan.min_interval %}disabled{% endif %} {% if (form.interval_minutes|int if form.interval_minutes else 5) == mi %}selected{% endif %}>{{ label }}{% if mi < plan.min_interval %} (upgrade){% endif %}</option>
      {% endfor %}
    </select>{% if mode == 'domain' %}<div class="help">Domain monitors run at most every 30 minutes; the expiry lookup happens twice a day.</div>{% endif %}</div>
  {% endif %}
  {% if mode in ('uptime','api','text','price','keyword','health','flow') %}
  <div class="grid g2">
    <div class="row"><label>Max response time (ms) <span class="muted">(optional)</span></label><input type="number" name="max_latency_ms" min="50" value="{{ form.max_latency_ms or '' }}" placeholder="800"><div class="help">"Degraded" incident after 3 slow checks in a row. Doesn't count as downtime.</div></div>
    {% if mode != 'flow' %}<div class="row"><label>SSL expiry alert (days before)</label><input type="number" name="ssl_alert_days" min="1" max="90" value="{{ form.ssl_alert_days or 14 }}"><div class="help">Checked twice a day for https URLs.</div></div>{% endif %}
  </div>
  {% if mode != 'flow' %}<div class="row"><label class="check"><input type="checkbox" name="security_alerts" value="1" {% if form.security_alerts == '1' %}checked{% endif %}> Alert me when the security grade drops</label><div class="help">We grade HSTS, CSP, cookie flags, TLS versions and more every week. See the Security tab on the monitor.</div></div>{% endif %}
  {% endif %}
  {% if mode in ('uptime','api','text','price','keyword','health','flow','tcp') %}
  <div class="grid g2">
    <div class="row"><label>SLO target (% per 30 days) {% if not plan.slo %}<span class="pill brand">Pro</span>{% endif %}</label><input type="text" name="slo_target" value="{{ form.slo_target or '' }}" placeholder="99.9" {% if not plan.slo %}disabled{% endif %}><div class="help">Shows the error budget (minutes of downtime left) and appears in the SLA report.</div></div>
    <div class="row"><label class="check" style="margin-top:26px"><input type="checkbox" name="anomaly_alerts" value="1" {% if form.anomaly_alerts == '1' %}checked{% endif %} {% if not plan.anomaly %}disabled{% endif %}> Adaptive latency alerts {% if not plan.anomaly %}<span class="pill brand">Pro</span>{% endif %}</label><div class="help">Learns the normal response time over 7 days and alerts when three checks in a row are far above it. No threshold to guess.</div></div>
  </div>
  {% endif %}
  {% if mode != 'heartbeat' %}
  <div class="row"><label class="check"><input type="checkbox" name="confirm_retry" value="1" {% if (form.confirm_retry or '1') != '0' %}checked{% endif %}> Re-check 12 seconds after a failure before counting it</label><div class="help">Cuts false alarms from a single dropped packet. A monitor is marked down after 2 consecutive failed checks.</div></div>
  <input type="hidden" name="confirm_retry" value="0">
  {% endif %}
  <div class="row"><label>Repeat alert while down (minutes)</label><input type="number" name="repeat_alert_minutes" min="0" value="{{ form.repeat_alert_minutes or 0 }}"><div class="help">0 = alert once on down and once on recovery. 30 = nag every 30 minutes until it's back or acknowledged.</div></div>
  <div class="row"><label>Send alerts to</label>
    {% if channels %}
      {% for c in channels %}<label class="check"><input type="checkbox" name="channel_ids" value="{{ c.id }}" {% if c.id|string in (form.channel_ids or []) %}checked{% endif %}> {{ c.name }} <span class="pill">{{ c.kind }}</span></label>{% endfor %}
      <div class="help">{% if smtp_enabled %}Nothing selected → we'll email {{ ws.email }}.{% else %}With none selected, alerts only appear in this dashboard.{% endif %}</div>
    {% else %}
      <div class="help">You have no channels yet. <a href="/app/channels">Add Telegram, Slack, Discord, ntfy, Pushover or a webhook</a> to get notified.</div>
    {% endif %}
  </div>
  <div class="row"><label>Escalate if nobody acknowledges within (minutes) {% if not plan.escalation %}<span class="pill brand">Pro</span>{% endif %}</label><input type="number" name="escalation_minutes" min="0" value="{{ form.escalation_minutes or 0 }}" {% if not plan.escalation %}disabled{% endif %}><div class="help">0 = off. Otherwise, a DOWN incident that is still open and unacknowledged after this many minutes is sent to the escalation channels below (your on-call's phone via Pushover, a second Telegram group, PagerDuty webhook…).</div></div>
  {% if plan.escalation and channels %}<div class="row"><label>Escalation channels</label>{% for c in channels %}<label class="check"><input type="checkbox" name="escalation_channel_ids" value="{{ c.id }}" {% if c.id|string in (form.escalation_channel_ids or []) %}checked{% endif %}> {{ c.name }} <span class="pill">{{ c.kind }}</span></label>{% endfor %}</div>{% endif %}
  <div class="actions" style="margin-top:20px">
    <button class="btn primary" onclick="syncSteps()">{% if monitor %}Save changes{% else %}Create monitor{% endif %}</button>
    <a class="btn" href="{% if monitor %}/app/monitors/{{ monitor.id }}{% else %}/app{% endif %}">Cancel</a>
  </div>
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
function hbMode(kind, btn){document.querySelectorAll('.seg button').forEach(function(b){b.classList.remove('on')});btn.classList.add('on');
  document.getElementById('hb-period').style.display=kind==='period'?'':'none';document.getElementById('hb-cron').style.display=kind==='cron'?'':'none';
  if(kind==='period'){document.querySelector('[name=schedule_cron]').value='';}}
{% if mode == 'flow' %}
var stepsEl=document.getElementById('steps'), jsonEl=document.getElementById('steps-json'), jsonMode=false;
function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;')}
function stepHtml(i,s){s=s||{};var h=s.headers?Object.keys(s.headers).map(function(k){return k+': '+s.headers[k]}).join('\n'):'';
  var ex=s.extract?Object.keys(s.extract).map(function(k){return k+' = '+s.extract[k]}).join('\n'):'';
  var body=typeof s.body==='string'?s.body:(s.body?JSON.stringify(s.body):'');
  return '<div class="step" data-i="'+i+'"><div class="t"><b>Step '+(i+1)+'</b><div class="actions"><button type="button" class="btn ghost sm" onclick="moveStep('+i+',-1)">↑</button><button type="button" class="btn ghost sm" onclick="moveStep('+i+',1)">↓</button><button type="button" class="btn ghost sm danger" onclick="removeStep('+i+')">Remove</button></div></div>'+
  '<div class="grid g2"><div class="row"><label>Name</label><input type="text" class="s-name" value="'+esc(s.name)+'" placeholder="Login"></div><div class="row"><label>Method &amp; expected status</label><div style="display:flex;gap:8px"><select class="s-method" style="width:110px">'+['GET','POST','PUT','PATCH','DELETE','HEAD'].map(function(m){return '<option'+((s.method||'GET')===m?' selected':'')+'>'+m+'</option>'}).join('')+'</select><input type="text" class="s-status" value="'+esc(s.expect_status||'2xx')+'" placeholder="2xx"></div></div></div>'+
  '<div class="row"><label>URL</label><input type="text" class="s-url mono" value="'+esc(s.url)+'" placeholder="https://api.example.com/items/{{ '{{' }}id{{ '}}' }}"></div>'+
  '<div class="grid g2"><div class="row"><label>Headers</label><textarea class="s-headers mono" rows="2" placeholder="Authorization: Bearer {{ '{{' }}token{{ '}}' }}">'+esc(h)+'</textarea></div><div class="row"><label>Body</label><textarea class="s-body mono" rows="2">'+esc(body)+'</textarea></div></div>'+
  '<div class="grid g2"><div class="row"><label>Assertions (one per line)</label><textarea class="s-assert mono" rows="2" placeholder="json token exists">'+esc(s.assertions||'')+'</textarea></div><div class="row"><label>Extract variables (name = json:path | header:name | regex:pattern)</label><textarea class="s-extract mono" rows="2" placeholder="token = json:data.token">'+esc(ex)+'</textarea></div></div></div>';}
function readSteps(){var out=[];stepsEl.querySelectorAll('.step').forEach(function(el){var s={name:el.querySelector('.s-name').value,method:el.querySelector('.s-method').value,url:el.querySelector('.s-url').value,expect_status:el.querySelector('.s-status').value||'2xx',headers:{},assertions:el.querySelector('.s-assert').value,extract:{}};
  el.querySelector('.s-headers').value.split('\n').forEach(function(l){var i=l.indexOf(':');if(i>0)s.headers[l.slice(0,i).trim()]=l.slice(i+1).trim()});
  var b=el.querySelector('.s-body').value.trim();if(b)s.body=b;
  el.querySelector('.s-extract').value.split('\n').forEach(function(l){var i=l.indexOf('=');if(i>0)s.extract[l.slice(0,i).trim()]=l.slice(i+1).trim()});out.push(s)});return out;}
function renderSteps(list){stepsEl.innerHTML=list.map(function(s,i){return stepHtml(i,s)}).join('');}
function current(){return jsonMode?JSON.parse(jsonEl.value||'[]'):readSteps()}
function addStep(){var l=current();l.push({method:'GET',expect_status:'2xx'});if(jsonMode){jsonEl.value=JSON.stringify(l,null,2)}else{renderSteps(l)}}
function removeStep(i){var l=readSteps();l.splice(i,1);renderSteps(l)}
function moveStep(i,d){var l=readSteps();var j=i+d;if(j<0||j>=l.length)return;var t=l[i];l[i]=l[j];l[j]=t;renderSteps(l)}
function toggleJson(){if(jsonMode){try{renderSteps(JSON.parse(jsonEl.value||'[]'))}catch(e){alert('JSON is invalid: '+e.message);return}stepsEl.style.display='';document.getElementById('json-row').style.display='none';jsonMode=false}else{jsonEl.value=JSON.stringify(readSteps(),null,2);stepsEl.style.display='none';document.getElementById('json-row').style.display='';jsonMode=true}}
function syncSteps(){if(!jsonMode){jsonEl.value=JSON.stringify(readSteps())}}
try{renderSteps(JSON.parse(jsonEl.value||'[]'))}catch(e){jsonMode=true;stepsEl.style.display='none';document.getElementById('json-row').style.display=''}
{% else %}
function syncSteps(){}
{% endif %}
</script>
{% endblock %}