<% title = 'New Monitor — WHM Monitor' %>
<%- include('_header', { user: { is_admin: false, email: '' } }) %>

<div class="card">
  <h1>New Monitor</h1>
  <form method="POST" action="/monitors/new">
    <label>List
      <select name="list_id" required>
        <% lists.forEach(l => { %>
          <option value="<%= l.id %>" <%= String(preselectedList) === String(l.id) ? 'selected' : '' %>><%= l.name %></option>
        <% }) %>
      </select>
    </label>

    <label>Name
      <input type="text" name="name" placeholder="My Website" required>
    </label>

    <label>Target (domain or IP)
      <input type="text" name="target" placeholder="example.com" required>
    </label>

    <label>Type
      <select name="type" id="type-select" onchange="toggleFields()" required>
        <option value="https">HTTPS (website)</option>
        <option value="http">HTTP (website)</option>
        <option value="tcp">TCP Port (FTP / sFTP / SMTP / MySQL / custom)</option>
      </select>
    </label>

    <div id="http-fields">
      <label>Path
        <input type="text" name="path" value="/">
      </label>
      <label>Expected HTTP status
        <input type="number" name="expected_status" value="200">
      </label>
    </div>

    <div id="tcp-fields" style="display:none">
      <label>Port
        <input type="number" name="port" placeholder="21 (FTP), 22 (sFTP), 25 (SMTP), 3306 (MySQL)...">
      </label>
    </div>

    <label>Slow-response threshold (ms)
      <input type="number" name="slow_threshold_ms" value="3000">
    </label>

    <label>Check interval (minutes)
      <input type="number" name="check_interval_min" value="60">
    </label>

    <label>Alert after this many consecutive failures
      <input type="number" name="consecutive_fail_to_alert" value="2">
    </label>

    <button type="submit">Create monitor</button>
  </form>
</div>

<script>
  function toggleFields() {
    const type = document.getElementById('type-select').value;
    document.getElementById('http-fields').style.display = type === 'tcp' ? 'none' : 'block';
    document.getElementById('tcp-fields').style.display = type === 'tcp' ? 'block' : 'none';
  }
</script>

<%- include('_footer') %>