{% extends "base.html" %}
{% block title %}{{ "Edit" if server else "Register" }} MCP server — mcprack{% endblock %}
{% block content %}

<section class="section">
  <h1>🔧 {{ "Edit" if server else "Register" }} MCP server</h1>
  {% if demo_mode %}
  <div class="flash-error" style="margin-bottom: var(--space-lg);">
    Read-only on this public demo instance — you can see how this server is configured, but changes can't be saved.
  </div>
  {% endif %}
  {% if icon_url %}
  <p style="display: flex; align-items: center; gap: var(--space-sm);">
    <img src="{{ icon_url }}" alt="" class="server-icon" width="32" height="32">
    <small class="text-muted">Detected from AppStream metadata</small>
  </p>
  {% endif %}

  <form method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <fieldset {{ "disabled" if demo_mode else "" }} style="border: none; padding: 0; margin: 0;">
    <div class="form-group">
      <label for="name">Name (unique slug)</label>
      <input type="text" id="name" name="name" value="{{ server.name if server else '' }}"
             {{ 'readonly' if server else '' }} required>
    </div>

    <div class="form-group">
      <label for="label">Label</label>
      <input type="text" id="label" name="label" value="{{ server.label if server else '' }}" required>
    </div>

    <div class="form-group">
      <label for="description">Description</label>
      <textarea id="description" name="description" rows="2">{{ server.description if server else '' }}</textarea>
    </div>

    <div class="form-group">
      <label for="category">Category</label>
      <input type="text" id="category" name="category" value="{{ server.category if server else '' }}">
    </div>

    <div class="form-group">
      <label for="transport">Transport (how the server itself communicates)</label>
      <select id="transport" name="transport">
        {% for t in ["stdio", "http", "sse"] %}
        <option value="{{ t }}" {{ "selected" if server and server.transport == t else "" }}>{{ t }}</option>
        {% endfor %}
      </select>
      <p class="text-muted" style="font-size: var(--font-size-xs); margin-top: var(--space-sm);">
        This only records the server's own implementation. Users always connect remotely — a
        stdio server is spawned on demand by mcprack itself, one instance per user, and never
        needs a network endpoint configured below unless it's a genuinely external HTTP/SSE service.
      </p>
    </div>

    <fieldset>
      <legend>Local stdio command (spawned by mcprack itself, one instance per user)</legend>
      <div class="form-group">
        <label for="command">Command</label>
        <input type="text" id="command" name="command" value="{{ server.command if server else '' }}">
      </div>
      <div class="form-group">
        <label for="args">Args (space-separated)</label>
        <input type="text" id="args" name="args" value="{{ server.args | join(' ') if server else '' }}">
      </div>
    </fieldset>

    <fieldset>
      <legend>Network endpoint (for servers that are already running elsewhere)</legend>
      <div class="form-group">
        <label for="url">URL</label>
        <input type="text" id="url" name="url" value="{{ server.url if server else '' }}"
               placeholder="http://mcphost.spojenet.cz:3100/mcp/">
      </div>
      <div class="form-group">
        <label for="auth_header_name">Auth header name</label>
        <input type="text" id="auth_header_name" name="auth_header_name"
               value="{{ server.auth_header_name if server else '' }}" placeholder="Authorization">
      </div>
      <div class="form-group">
        <label for="auth_env_key">Auth token env key</label>
        <input type="text" id="auth_env_key" name="auth_env_key"
               value="{{ server.auth_env_key if server else '' }}" placeholder="AUTH_TOKEN">
        <p class="text-muted" style="font-size: var(--font-size-xs); margin-top: var(--space-sm);">
          Whichever row below has this key is always treated as citlivé/sensitive, regardless of
          its checkbox — it carries a credential by definition.
        </p>
      </div>
    </fieldset>

    <fieldset>
      <legend>{{ _('Environment variables') }}</legend>
      <p class="text-muted" style="font-size: var(--font-size-sm);">
        {{ _("Mark a row <strong>sensitive</strong> if it's a secret — those go to Vaultwarden (or an encrypted local fallback if Vaultwarden isn't configured). Everything else is stored directly in mcprack's own database.") }}
      </p>

      <div id="env-rows"></div>

      <button type="button" class="btn btn-secondary btn-sm" onclick="addEnvRow('', '', false)">
        ➕ {{ _('Add row') }}
      </button>
    </fieldset>

    <div class="form-group">
      <label>
        <input type="checkbox" name="allow_user_override" {{ "checked" if not server or server.allow_user_override else "" }}>
        Allow users to override credentials with their own
      </label>
    </div>

    <div class="form-group">
      <label>
        <input type="checkbox" name="enabled" {{ "checked" if not server or server.enabled else "" }}>
        Enabled (visible in catalog)
      </label>
    </div>

    <button type="submit" class="btn btn-primary">{{ "🔒 Read-only" if demo_mode else "💾 Save" }}</button>
  </fieldset>
  </form>
</section>

<script>
  const ENV_ROWS_INITIAL = {{ env_rows | tojson }};
  let envRowCounter = 0;

  function addEnvRow(key, value, sensitive) {
    envRowCounter += 1;
    const id = envRowCounter;

    const row = document.createElement("div");
    row.className = "env-row";
    row.dataset.rowId = id;
    row.style.cssText = "display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-sm);";

    const keyInput = document.createElement("input");
    keyInput.type = "text";
    keyInput.name = `env_key__${id}`;
    keyInput.value = key || "";
    keyInput.placeholder = "KEY";
    keyInput.style.flex = "1";

    const valueInput = document.createElement("input");
    valueInput.type = "text";
    valueInput.name = `env_value__${id}`;
    valueInput.value = value || "";
    valueInput.placeholder = "value";
    valueInput.style.flex = "2";

    const label = document.createElement("label");
    label.style.cssText = "display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap;";
    const sensitiveInput = document.createElement("input");
    sensitiveInput.type = "checkbox";
    sensitiveInput.name = `env_sensitive__${id}`;
    sensitiveInput.checked = !!sensitive;
    label.appendChild(sensitiveInput);
    label.appendChild(document.createTextNode(" " + {{ _('sensitive') | tojson }}));

    const removeButton = document.createElement("button");
    removeButton.type = "button";
    removeButton.className = "btn btn-sm btn-danger";
    removeButton.textContent = "✕";
    removeButton.addEventListener("click", function () {
      row.remove();
    });

    row.append(keyInput, valueInput, label, removeButton);
    document.getElementById("env-rows").appendChild(row);
  }

  ENV_ROWS_INITIAL.forEach(function (row) {
    addEnvRow(row.key, row.value, row.sensitive);
  });
</script>

{% endblock %}