{# Shared type-specific monitor form fields. Every field is rendered; a tiny
   script (mtoggle) shows only the ones relevant to the selected type. #}
{% macro type_fields(config={}) %}

{# tcp #}
<div class="mfield" data-types="tcp">
  <label class="field-label">Port</label>
  <input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" class="input">
</div>

{# dns #}
<div class="mfield" data-types="dns">
  <label class="field-label">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
  <input type="text" name="expected_ip" value="{{ config.get('expected_ip') or '' }}"
         placeholder="e.g. 192.0.2.10" autocomplete="off" class="input">
</div>

{# http #}
<div class="mfield" data-types="http">
  <label class="field-label">Method</label>
  <select name="method" class="input">
    {% for opt in ["GET", "HEAD", "POST"] %}
    <option value="{{ opt }}" {% if config.get('method', 'GET') == opt %}selected{% endif %}>{{ opt }}</option>
    {% endfor %}
  </select>
</div>
<div class="mfield" data-types="http">
  <label class="field-label">Expected status</label>
  <input type="number" name="expected_status" value="{{ config.get('expected_status', 200) }}"
         min="100" max="599" class="input">
</div>
<div class="mfield" data-types="http">
  <label class="field-label">Timeout (s)</label>
  <input type="number" name="timeout_seconds" value="{{ config.get('timeout_seconds', 10) }}"
         min="1" max="60" class="input">
</div>
<div class="mfield" data-types="http">
  <label class="field-label">Content match <span style="color:var(--text-dim);">(substring)</span></label>
  <input type="text" name="content_match" value="{{ config.get('content_match', '') }}"
         placeholder="optional" autocomplete="off" class="input">
</div>
<div class="mfield" data-types="http" style="display:flex;flex-direction:column;gap:0.3rem;justify-content:flex-end;">
  <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
    <input type="checkbox" name="follow_redirects" {% if config.get('follow_redirects', True) %}checked{% endif %}> Follow redirects
  </label>
  <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
    <input type="checkbox" name="verify_ssl" {% if config.get('verify_ssl', True) %}checked{% endif %}> Verify SSL
  </label>
</div>
{% endmacro %}

{# Show only the fields whose data-types matches the active monitor type. #}
{% macro toggle_script() %}
<script>
function mtoggle(t) {
  document.querySelectorAll('.mfield').forEach(function (el) {
    var types = (el.getAttribute('data-types') || '').split(',');
    el.style.display = types.indexOf(t) !== -1 ? '' : 'none';
  });
}
</script>
{% endmacro %}