{% extends "base.html" %}
{% block title %}{{ 'Add' if is_new else 'Edit' }} Device - Juniper Manager{% endblock %}
{% block content %}
<h1>{{ 'Add' if is_new else 'Edit' }} Device</h1>
<div class="card" style="max-width:560px;">
  <form method="post" novalidate>
    {{ form.hidden_tag() }}
    <div class="form-group">
      {{ form.name.label }}
      {{ form.name() }}
    </div>
    <div class="form-group">
      {{ form.hostname.label }}
      {{ form.hostname() }}
    </div>
    <div class="form-group">
      {{ form.port.label }}
      {{ form.port() }}
    </div>
    <div class="form-group">
      {{ form.username.label }}
      {{ form.username() }}
    </div>
    <div class="form-group">
      {{ form.auth_type.label }}
      {{ form.auth_type() }}
    </div>
    <div class="form-group" id="password-field">
      {{ form.password.label }}
      {{ form.password() }}
      <div class="hint">{{ form.password.description }}</div>
    </div>
    <div id="key-fields">
      <div class="form-group">
        {{ form.private_key.label }}
        {{ form.private_key(rows=6) }}
        <div class="hint">{{ form.private_key.description }}</div>
      </div>
      <div class="form-group">
        {{ form.key_passphrase.label }}
        {{ form.key_passphrase() }}
      </div>
    </div>
    <div class="form-group">
      {{ form.site.label }}
      {{ form.site() }}
    </div>
    <div class="form-group">
      {{ form.notes.label }}
      {{ form.notes(rows=3) }}
    </div>

    <div class="form-group">
      <button type="button" id="test-connection-btn" class="btn">Test Connection</button>
      <div id="test-connection-result" style="margin-top:8px;"></div>
    </div>

    {{ form.submit(class_="btn btn-primary") }}
    <a href="{{ url_for('devices.list_devices') }}" class="btn">Cancel</a>
  </form>
</div>

<script>
  window.TEST_CONNECTION_URL = "{{ url_for('devices.test_connection') }}";
  window.CURRENT_DEVICE_ID = {{ device.id if device else 'null' }};
</script>
<script src="{{ url_for('static', filename='js/devices.js') }}"></script>
{% endblock %}