{{define "pgcreds_form"}}
<div id="pgcreds-section">
  {{if .PGCred}}
  <dl style="display:grid;grid-template-columns:140px 1fr;gap:.5rem .75rem;font-size:.9rem;margin-bottom:1rem">
    <dt class="text-muted">Host</dt><dd>{{.PGCred.PGHost}}:{{.PGCred.PGPort}}</dd>
    <dt class="text-muted">Database</dt><dd>{{.PGCred.PGDatabase}}</dd>
    <dt class="text-muted">Username</dt><dd>{{.PGCred.PGUsername}}</dd>
    <dt class="text-muted">Password</dt><dd><em class="text-muted">stored (not shown)</em></dd>
    <dt class="text-muted">Updated</dt><dd class="text-small">{{formatTime .PGCred.UpdatedAt}}</dd>
  </dl>
  {{else}}
  <p class="text-muted text-small" style="margin-bottom:1rem">No credentials stored.</p>
  {{end}}
  <form hx-put="/accounts/{{.Account.UUID}}/pgcreds"
        hx-target="#pgcreds-section" hx-swap="outerHTML">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <input class="form-control" type="text" name="host" placeholder="Host" required
             value="{{if .PGCred}}{{.PGCred.PGHost}}{{end}}">
      <input class="form-control" type="number" name="port" placeholder="Port (5432)"
             min="1" max="65535"
             value="{{if .PGCred}}{{.PGCred.PGPort}}{{end}}">
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem">
      <input class="form-control" type="text" name="database" placeholder="Database" required
             value="{{if .PGCred}}{{.PGCred.PGDatabase}}{{end}}">
      <input class="form-control" type="text" name="username" placeholder="Username" required
             value="{{if .PGCred}}{{.PGCred.PGUsername}}{{end}}">
    </div>
    <input class="form-control" type="password" name="password"
           placeholder="Password (required to update)" required
           style="margin-bottom:.5rem">
    <button class="btn btn-sm btn-secondary" type="submit">Save Credentials</button>
  </form>
</div>
{{end}}