{% extends "base.html" %}
{% set editing = server_id is not none %}
{% block title %}{{ "Edit Server" if editing else "Add Server" }}{% endblock %}
{% block heading %}{{ "Edit Server" if editing else "Add Server" }}{% endblock %}
{% block content %}
<div class="card form-card">
  {% if errors %}
    <div class="alert alert-error" role="alert">Please correct the highlighted fields.</div>
  {% endif %}
  <form method="post" action="{{ '/servers/%d/edit' % server_id if editing else '/servers/new' }}" novalidate>
    <div class="field{% if errors.name %} has-error{% endif %}">
      <label for="name">Server Name</label>
      <input type="text" id="name" name="name" value="{{ form.name }}" placeholder="app-prod-01"
             maxlength="64" autocomplete="off" required>
      <div class="hint">Must be unique. Used to match servers in CVE reports.</div>
      {% if errors.name %}<div class="field-error">{{ errors.name }}</div>{% endif %}
    </div>
    <div class="field{% if errors.ip_address %} has-error{% endif %}">
      <label for="ip_address">IP Address</label>
      <input type="text" id="ip_address" name="ip_address" value="{{ form.ip_address }}"
             placeholder="10.10.20.15" autocomplete="off" required>
      {% if errors.ip_address %}<div class="field-error">{{ errors.ip_address }}</div>{% endif %}
    </div>
    {% set method = form.auth_method or "pem" %}
    <div class="field auth-field{% if errors.auth_method %} has-error{% endif %}">
      <label for="auth_method">Login type</label>
      <select id="auth_method" name="auth_method" data-auth-method>
        {% for key, label in auth_methods.items() %}
          <option value="{{ key }}"{% if method == key %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
      {% if errors.auth_method %}<div class="field-error">{{ errors.auth_method }}</div>{% endif %}
      <noscript>
        {# Without JavaScript both the PEM path and the password fields stay visible. #}
        <style>[data-auth-only] { display: block !important; }</style>
        <div class="hint noscript-auth-hint">Both the PEM key and the password fields are shown; only the ones of the chosen login type are used.</div>
      </noscript>
    </div>
    <div class="field{% if errors.pem_path %} has-error{% endif %}" data-auth-only="pem">
      <label for="pem_path">PEM File</label>
      <input type="text" id="pem_path" name="pem_path" value="{{ form.pem_path }}"
             placeholder="~/.ssh/prod.pem" autocomplete="off" spellcheck="false" required>
      <div class="hint">Path to the private key on this machine. Only the path is stored.</div>
      {% if errors.pem_path %}<div class="field-error">{{ errors.pem_path }}</div>{% endif %}
    </div>
    <div class="field{% if errors.ssh_password %} has-error{% endif %}" data-auth-only="password">
      <label for="ssh_password">SSH Password</label>
      {# Never pre-filled: the stored password is never sent back to the browser. #}
      <input type="password" id="ssh_password" name="ssh_password" value="" autocomplete="new-password" spellcheck="false">
      {% if errors.ssh_password %}<div class="field-error">{{ errors.ssh_password }}</div>{% endif %}
      {% if stored_password_error %}<div class="field-error stored-password-error">{{ stored_password_error }}</div>{% endif %}
      <div class="hint">{% if has_stored_password %}<span class="badge badge-success">Password stored</span> Leave empty to keep the stored password. {% endif %}Stored encrypted per server; never shown, logged or put on a command line. Requires <code>sshpass</code> on this machine. <code>sudo</code> on the server must still be passwordless.</div>
    </div>
    <div class="field{% if errors.ssh_user %} has-error{% endif %}">
      <label for="ssh_user">SSH User</label>
      <input type="text" id="ssh_user" name="ssh_user" value="{{ form.ssh_user }}"
             placeholder="ubuntu" maxlength="32" autocomplete="off" spellcheck="false" required>
      <div class="hint">Login user for every SSH/SCP connection to this server (default <code>ubuntu</code>; e.g. <code>ec2-user</code> on Amazon Linux).</div>
      {% if errors.ssh_user %}<div class="field-error">{{ errors.ssh_user }}</div>{% endif %}
    </div>

    <fieldset class="field tags-field{% if errors.tags %} has-error{% endif %}">
      <legend>Tags <span class="muted small">(optional)</span></legend>
      <div class="hint">Free-form key/value labels, e.g. <code>display_name</code> = <code>Billing API</code>.
        Keys must be unique per server. Empty rows are ignored.</div>
      <div class="tag-rows" id="tag-rows">
        {% for tag in form.tags or [{"key": "", "value": ""}] %}
          <div class="tag-row">
            <input type="text" name="tag_key" value="{{ tag.key }}" placeholder="Key"
                   aria-label="Tag key" maxlength="64" autocomplete="off">
            <input type="text" name="tag_value" value="{{ tag.value }}" placeholder="Value"
                   aria-label="Tag value" maxlength="256" autocomplete="off">
            <button type="button" class="btn btn-ghost btn-sm" data-remove-tag>Remove</button>
          </div>
        {% endfor %}
      </div>
      <template id="tag-row-template">
        <div class="tag-row">
          <input type="text" name="tag_key" value="" placeholder="Key"
                 aria-label="Tag key" maxlength="64" autocomplete="off">
          <input type="text" name="tag_value" value="" placeholder="Value"
                 aria-label="Tag value" maxlength="256" autocomplete="off">
          <button type="button" class="btn btn-ghost btn-sm" data-remove-tag>Remove</button>
        </div>
      </template>
      <button type="button" class="btn btn-secondary btn-sm" id="add-tag">+ Add Tag</button>
      {% if errors.tags %}<div class="field-error">{{ errors.tags }}</div>{% endif %}
    </fieldset>

    {% if ssh_result %}{% include "_ssh_result.html" %}{% endif %}

    <div class="form-actions">
      <button type="submit" name="action" value="test" class="btn btn-secondary">Test Connection</button>
      <span class="spacer"></span>
      <a href="/servers" class="btn btn-ghost">Cancel</a>
      <button type="submit" name="action" value="save" class="btn btn-primary">Save Server</button>
    </div>
  </form>
</div>
{% endblock %}