outsidethedb/app/templates/edit_host.html

{% extends "base.html" %}
{% block content %}
<div class="row between">
  <h1>{% if is_new %}Add Host{% else %}Edit Host{% endif %}</h1>
  <div class="actions">
    <a class="btn" href="{{ url_for('hosts') }}">Back</a>
    {% if not is_new %}
      <form method="post" action="{{ url_for('host_delete', hid=host.id) }}" onsubmit="return confirm('Delete this host?');" style="display:inline">
        <button class="btn danger" type="submit">Delete</button>
      </form>
    {% endif %}
  </div>
</div>

<form class="form" method="post">
  <div class="grid2">
    <div>
      <label>FQDN (full hostname) <span class="req">(required)</span></label>
      <input name="fqdn" value="{{ host.fqdn or '' }}" placeholder="explorer.etica-stats.org" required>
      <div class="subtle">If you fill FQDN, zone/sub can auto-fill when you save.</div>
    </div>
    <div>
      <label>Monitoring enabled</label>
      <label class="checkbox">
        <input type="checkbox" name="monitor_enabled" {% if host.monitor_enabled %}checked{% endif %}>
        Enable status + SSL checks
      </label>
    </div>

    <div>
      <label>Zone (base domain)</label>
      <input name="zone" value="{{ host.zone or '' }}" placeholder="etica-stats.org">
    </div>
    <div>
      <label>Subdomain (blank for apex)</label>
      <input name="sub" value="{{ host.sub or '' }}" placeholder="explorer">
    </div>

    <div>
      <label>Client name</label>
      <input name="client_name" value="{{ host.client_name or '' }}">
    </div>
    <div>
      <label>Email</label>
      <input name="email" value="{{ host.email or '' }}">
    </div>

    <div>
      <label>Country</label>
      <input name="country" value="{{ host.country or '' }}">
    </div>
    <div>
      <label>Package type</label>
      <input name="package_type" value="{{ host.package_type or '' }}" placeholder="Hosting / Hosting+Monitoring / etc">
    </div>

    <div>
      <label>DNS provider</label>
      <input name="dns_provider" value="{{ host.dns_provider or '' }}" placeholder="Namecheap / Cloudflare / etc">
    </div>
    <div>
      <label>Host expires (orange warning ≤30d)</label>
      <input type="datetime-local" name="host_expires_at" value="{{ host.host_expires_at_html or '' }}">
    </div>

    <div>
      <label>Public IP</label>
      <input name="public_ip" value="{{ host.public_ip or '' }}">
    </div>
    <div>
      <label>Private IP</label>
      <input name="private_ip" value="{{ host.private_ip or '' }}">
    </div>

    <div>
      <label>PVE host</label>
      <input name="pve_host" value="{{ host.pve_host or '' }}" placeholder="pve1 / pve2 / nl-pve">
    </div>
    <div>
      <label>Notes</label>
      <textarea name="notes" rows="5">{{ host.notes or '' }}</textarea>
    </div>
  </div>

  <div class="row between">
    <div class="subtle">
      {% if host.ssl_expires_at %}SSL expires: {{ host.ssl_expires_at.strftime("%Y-%m-%d") }}{% endif %}
      {% if host.last_check_at %} • last check: {{ host.last_check_at.strftime("%Y-%m-%d %H:%M") }}{% endif %}
      {% if host.last_error %}<div class="warn">Last error: {{ host.last_error }}</div>{% endif %}
    </div>
    <button class="btn primary" type="submit">Save</button>
  </div>
</form>
{% endblock %}

<script>
function buildFqdn(){
  const zone=document.querySelector('input[name="zone"]');
  const sub=document.querySelector('input[name="sub"]');
  const fqdn=document.querySelector('input[name="fqdn"]');
  if(!zone||!fqdn) return;
  const z=(zone.value||'').trim().toLowerCase().replace(/^\.+|\.+$/g,'');
  const s=(sub&&sub.value?sub.value:'').trim().toLowerCase().replace(/^\.+|\.+$/g,'');
  if(!fqdn.value.trim() && z){
    fqdn.value = (s? (s+'.') : '') + z;
  }
}
['change','blur','keyup'].forEach(ev=>{
  const z=document.querySelector('input[name="zone"]');
  const s=document.querySelector('input[name="sub"]');
  if(z) z.addEventListener(ev, buildFqdn);
  if(s) s.addEventListener(ev, buildFqdn);
});
</script>