{% extends "base.html" %}

{% block content %}
<section class="auth-layout auth-layout--full-width">
  <div class="auth-copy">
    <p class="eyebrow">Instance</p>
    <h1>{% if mode == "create" %}Add a managed instance.{% else %}Edit managed instance.{% endif %}</h1>
    <p class="hero-text">
      Instances represent PostgreSQL-backed GPDB connections. Graphs are discovered
      from the instance and shown globally in the dashboard.
    </p>
  </div>

  <div class="auth-card">
    <h2>{% if mode == "create" %}New instance{% else %}{{ instance.display_name }}{% endif %}</h2>
    <form class="auth-form" action="{{ submit_url }}" method="post">
      {% if mode == "create" %}
      <label class="field">
        <span>Slug</span>
        <input name="slug" value="{{ (form_data or {}).get('slug', '') }}" required>
      </label>
      {% else %}
      <label class="field">
        <span>Slug</span>
        <input value="{{ instance.slug }}" disabled>
      </label>
      {% endif %}

      <label class="field">
        <span>Display name</span>
        <input name="display_name" value="{{ (form_data or {}).get('display_name', '') }}" required>
      </label>

      <label class="field">
        <span>Description</span>
        <input name="description" value="{{ (form_data or {}).get('description', '') }}">
      </label>

      {% if mode == "create" or instance.mode == "external" %}
      <label class="field">
        <span>Host</span>
        <input name="host" value="{{ (form_data or {}).get('host', '') }}" required>
      </label>
      <label class="field">
        <span>Port</span>
        <input name="port" value="{{ (form_data or {}).get('port', '') }}">
      </label>
      <label class="field">
        <span>Database</span>
        <input name="database" value="{{ (form_data or {}).get('database', '') }}" required>
      </label>
      <label class="field">
        <span>Username</span>
        <input name="username" value="{{ (form_data or {}).get('username', '') }}" required>
      </label>
      <label class="field">
        <span>Password</span>
        <input name="password" type="password">
      </label>
      {% endif %}

      {% if mode == "edit" %}
      <label class="field field-checkbox">
        <input
          name="is_active"
          type="checkbox"
          value="true"
          {% if (form_data or {}).get('is_active') %}checked{% endif %}
        >
        <span>Instance is active</span>
      </label>
      {% endif %}

      <div class="button-row">
        <button class="button" type="submit">{% if mode == "create" %}Add instance{% else %}Save changes{% endif %}</button>
        <a class="button button-secondary" href="{{ web_app.url_path_for('home') }}">Back</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}