{% extends "base.html" %}
{% block title %}{{ 'Edit route' if route_id else 'New route' }}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{{ 'Edit ' ~ route.name if route_id else 'New route' }}</h1>
    <p class="muted">Saving stages the change. Nothing goes live until you apply it on the Changes page.</p>
  </div>
</div>

{% if errors %}
<div class="banner banner-error" role="alert">
  <strong>Please fix the following:</strong>
  <ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul>
</div>
{% endif %}

<form class="card form" method="post" action="{{ '/routes/%d/edit' % route_id if route_id else '/routes/new' }}">
  <input type="hidden" name="csrf" value="{{ user.csrf }}">

  <div class="field">
    <label for="name">Name</label>
    <input id="name" name="name" value="{{ route.name or '' }}" required maxlength="48" placeholder="Exchange prod">
  </div>

  <fieldset class="field">
    <legend>Type</legend>
    <div class="radios">
      {% for k, label in KINDS.items() %}
      <label class="radio"><input type="radio" name="kind" value="{{ k }}" {{ 'checked' if route.kind == k }}> {{ label }}</label>
      {% endfor %}
    </div>
    <p class="hint">
      <b>HTTPS</b> passes TLS straight through by hostname, so certificates stay on the server.
      <b>HTTP</b> routes port 80 by Host header, e.g. for Let's Encrypt HTTP-01.
      <b>TCP</b> sends a whole port (such as 25) to one pool, with no hostname routing.
    </p>
  </fieldset>

  <div class="field" data-for="https http">
    <label for="hostnames">Hostnames</label>
    <textarea id="hostnames" name="hostnames" rows="3" placeholder="mail.andykemp.com&#10;autodiscover.andykemp.com">{{ route.hostnames or '' }}</textarea>
    <p class="hint">One per line. <code>*.andykemp.dev</code> matches any subdomain.</p>
    <label class="check"><input type="checkbox" name="is_default" value="1" {{ 'checked' if route.is_default }}> Default route: also receive any hostname no other route matches</label>
  </div>

  <div class="field" data-for="tcp">
    <label for="listen_port">Listen port</label>
    <input id="listen_port" name="listen_port" inputmode="numeric" value="{{ route.listen_port or '' }}" placeholder="25">
  </div>

  <div class="field">
    <label for="servers">Backend servers</label>
    <textarea id="servers" name="servers" rows="3" required placeholder="192.168.1.10:443">{{ route.servers or '' }}</textarea>
    <p class="hint">One <code>address:port</code> per line. Add more than one to load balance.</p>
  </div>

  <div class="row">
    <div class="field">
      <label for="balance">Balancing</label>
      <select id="balance" name="balance">
        {% for k, label in BALANCE.items() %}<option value="{{ k }}" {{ 'selected' if route.balance == k }}>{{ label }}</option>{% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="check_mode">Health check</label>
      <select id="check_mode" name="check_mode">
        {% for k, label in CHECKS.items() %}<option value="{{ k }}" {{ 'selected' if route.check_mode == k }}>{{ label }}</option>{% endfor %}
      </select>
    </div>
    <div class="field" id="check_path_field">
      <label for="check_path">Check path</label>
      <input id="check_path" name="check_path" value="{{ route.check_path or '' }}" placeholder="/owa/healthcheck.htm">
    </div>
  </div>
  <p class="hint">For Exchange, an HTTP(S) check on <code>/owa/healthcheck.htm</code> takes a server out when it's unhealthy or in maintenance mode.</p>

  <div class="field">
    <label for="notes">Notes</label>
    <input id="notes" name="notes" maxlength="500" value="{{ route.notes or '' }}" placeholder="Optional">
  </div>

  <label class="check"><input type="checkbox" name="enabled" value="1" {{ 'checked' if route.enabled }}> Enabled</label>

  <div class="form-actions">
    <button class="btn" type="submit">Save route</button>
    <a class="btn btn-ghost" href="/">Cancel</a>
  </div>
</form>

<script>
(function () {
  var form = document.querySelector('form.form');
  function sync() {
    var kind = (form.querySelector('input[name=kind]:checked') || {}).value || 'https';
    form.querySelectorAll('[data-for]').forEach(function (el) {
      el.hidden = el.getAttribute('data-for').split(' ').indexOf(kind) === -1;
    });
    document.getElementById('check_path_field').hidden = document.getElementById('check_mode').value !== 'http';
  }
  form.addEventListener('change', sync);
  sync();
})();
</script>
{% endblock %}