<%!-- Back to provider picker (new mode only) --%> <%!-- Provider info header with status + validation context. Compact single-row layout: title + badge + connected-account on one line, then a status footer with error / timestamps inline. Previously the alert-error wrapper was visually huge compared to the small "Error" badge — collapsed to inline red text on the same line as the timestamps so the status info reads as one cohesive block. Provider description was also removed; once you've picked a provider you know what it is. --%>

<.icon name={@provider.icon} class="w-5 h-5" />

{@provider.name}

<%!-- No badge until the integration has actually been saved (@name set). Showing "Not connected" on a fresh /new flow misleads — nothing has been attempted yet, there's nothing to be disconnected from. --%> <%= cond do %> <% @name == nil -> %> <% @data["status"] == "connected" -> %> <.icon name="hero-check-circle" class="w-3 h-3" /> {gettext("Connected")} <% @data["status"] == "configured" -> %> {gettext("Not tested")} <% @data["status"] == "error" -> %> {gettext("Error")} <% true -> %> {gettext("Not connected")} <% end %> · {@data["external_account_id"]}

<%!-- Status footer: error message + timestamps on one line. Only renders when there's something to show (post-save state with validation context). --%>

<.icon name="hero-exclamation-triangle" class="w-3 h-3" /> {@data["validation_status"]} <.icon name="hero-signal" class="w-3 h-3" /> {gettext("Last tested")} {format_relative(@data["last_validated_at"])} <.icon name="hero-link" class="w-3 h-3" /> {gettext("Connected")} {format_relative(@data["connected_at"])}

<% credentials_saved = @name != nil && has_setup_credentials?(@data, @provider) %> <%!-- ONE form, ONE card. Connection Name + provider fields + action buttons all inside the same card body. Backend dispatches via `save_form`: - `@name == nil` → create_connection (creates row + saves creds in one shot) - `@name` set + posted name differs → rename_connection, then save_setup - name unchanged → just save_setup Test Connection lives next to Save inside the same card (secondary action, `type="button"` so it doesn't trigger submit). OAuth's Connect Account is a separate card below — different action shape (auth flow, not a save). --%>

<%!-- `py-4` on the card body matches the provider-info card above. Default `card-body` has 32px vertical padding — fine for OAuth (the first child is a "Step 1" header that anchors the top), but visually empty for non-OAuth providers where the first child is a plain field label. Tightening to `py-4` closes the gap between the provider title and the first form input. --%>

<%!-- OAuth-only Step 1 header. The two-card OAuth flow has Step 1 (this card: API credentials) and Step 2 (the separate card below: Connect Account). API key / bot token providers have no Step 2 — no badge. --%>

{gettext("Step 1")}

{gettext("API Credentials")}

{gettext("Enter your API credentials from the developer console.")}

<%!-- Connection name — always present, editable in both modes. New mode: empty placeholder; edit mode: current name pre-filled. Backend's `save_form` detects rename via params["name"] vs @name. --%>

{gettext("Connection Name")}

<%!-- Provider-specific fields. Even credential-shaped fields render as `type="text"` — they're API keys / OAuth secrets / bot tokens, not site logins. `type="password"` would trigger every browser's password-save heuristic (Firefox ignores `autocomplete="off"` on password fields by Mozilla policy) and offer to vault these as if they were user credentials. The `type="text"` choice avoids that whole class of UX noise; if shoulder-surfing ever becomes a concern in practice we can revisit with CSS-based masking. --%>

{field.label} * <%!-- Value resolution order: 1. `@form_values` — user-typed values captured during a dry-run test (`/new` flow). Without this, a failed test would re-render with empty inputs and look like the form ate the user's input. 2. `@data` — the saved credential, edit mode. 3. `""` — fresh /new, untouched. --%> {field.help}

<%!-- Action row at the bottom of the same card body. Both buttons submit the SAME form (`save_form`), which always saves the inputted values then auto-tests via `maybe_auto_test/2`. That means "Test Connection" verifies what's currently in the fields, not whatever was saved last time — typing a new api_key and clicking Test exercises the new key, not the stale one. For password fields the user didn't touch, the input is empty in the DOM; `extract_setup_attrs/2` strips empties so the existing saved credential is preserved across the no-op save, and the auto-test re-verifies it. --%>

<%!-- Test Connection — non-OAuth providers only. Two modes: - Saved row (`@name != nil`): submits the form so the inputted values get saved + auto-tested via `apply_save_outcome/2` (see backend). - /new flow (`@name == nil`): submits with `_intent="test"` which `save_form` routes to `test_credentials_dry_run/2` — probes the provider with the in-memory values, no persistence. Lets the operator verify the key works before committing to a connection row. `formnovalidate` bypasses HTML5 required-field validation when this specific button submits. The Connection Name input is `required` (the form needs it for `Save Changes` / `Create Connection`), but a Test doesn't need a name — the operator's intent is "does this api_key work?", and forcing them to invent a name first is needless friction. --%>

<%!-- Step 2: Connect Account (OAuth providers only) --%>

{gettext("Step 2")}

{gettext("Connect Account")}

<% meta = @data["metadata"] || %{} %> <%= if @data["status"] == "connected" do %>

<%!-- Avatar --%> <%= if meta["picture"] do %>

<% else %>

<.icon name="hero-user" class="w-5 h-5 text-base-content/40" />

<% end %>

{meta["name"]}

<.icon name="hero-check-circle" class="w-3 h-3" /> {gettext("Connected")}

{@data["external_account_id"]} {gettext("Connected on")} {format_date(@data["connected_at"])}

<% else %>

{gettext( "Authorize access to your %{provider} account. This will open a sign-in page where you choose which account to connect.", provider: @provider.name )}

<%= if credentials_saved do %> <% else %>

{gettext("Complete Step 1 first to enable account connection.")}

<% end %> <% end %>

<%!-- Setup instructions (from provider definition). In edit mode the operator has already done this once — collapse by default to save vertical space. In /new mode keep it open so the operator following the steps doesn't have to expand it first. --%>

<.icon name="hero-book-open" class="w-4 h-4" />

{gettext("Setup Instructions")}

<.icon name="hero-chevron-down" class="w-4 h-4 ml-auto text-base-content/40" />

{idx + 1}. {section.title}

{Phoenix.HTML.raw( render_markdown_inline(section.note, %{"redirect_uri" => @redirect_uri || ""}) )}

{Phoenix.HTML.raw( render_markdown_inline(text, %{"redirect_uri" => @redirect_uri || ""}) )}

<%!-- Danger Zone (edit mode only). Consolidates destructive actions so the operator doesn't have to navigate back to the list to disconnect / remove. Disconnect is OAuth-only (clears tokens but preserves client_id/secret + the row); Delete removes the integration row entirely. Both confirm via `data-confirm` browser dialog before firing. The Delete handler push_navigates back to the list on success. --%>

<.icon name="hero-exclamation-triangle" class="w-4 h-4 text-error" />

{gettext("Danger Zone")}

<.icon name="hero-chevron-down" class="w-4 h-4 ml-auto text-base-content/40" />

<%!-- Disconnect: OAuth providers only. Clears the access / refresh tokens so the next request requires a fresh OAuth dance. The credentials (client_id/secret) and the integration row stay so re-connecting is one click. --%>

{gettext("Disconnect account")}

{gettext( "Clears the OAuth tokens. Credentials and the connection itself stay so you can reconnect with one click." )}

<%!-- Delete: removes the integration row. Any module that referenced its uuid will surface :not_configured on next use — the loud failure is correct (the credentials are actually gone). --%>

{gettext("Delete this connection")}

{gettext( "Removes the integration permanently. Any module pinned to this connection will stop working until repointed." )}