{% macro secret_field(name, label, hint, required, suffix) %}
<div class="credential-field">
  <label class="form-label" for="credential-{{ suffix }}">{{ label }} <span class="field-requirement">{{ 'Required' if required else 'Optional' }}</span></label>
  <div class="credential-input-row">
    <input class="form-control" type="password" id="credential-{{ suffix }}" name="{{ name }}" maxlength="2048" {% if required %}required{% endif %} autocomplete="off" spellcheck="false" autocapitalize="none" data-credential-secret aria-describedby="credential-{{ suffix }}-hint credential-{{ suffix }}-caps">
    <button class="btn btn-outline-secondary credential-reveal" type="button" data-credential-reveal aria-controls="credential-{{ suffix }}" aria-pressed="false" aria-label="Show {{ label|lower }}" hidden>Show</button>
  </div>
  <p class="form-text mb-0" id="credential-{{ suffix }}-hint">{{ hint }}</p>
  <p class="credential-caps" id="credential-{{ suffix }}-caps" data-credential-caps role="status" hidden>Caps Lock is on.</p>
</div>
{% endmacro %}
<section class="credential-panel" data-credential-panel data-job-id="{{ job.id }}" data-server-now="{{ credential_server_now }}" data-deadline="{{ job.credential_deadline }}" hx-history="false">
  <div class="credential-scope">
    <span class="credential-scope-symbol" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M7 10V7a5 5 0 0 1 10 0v3M5 10h14v11H5zM12 14v3"/></svg></span>
    <div><strong>{{ job.plan.playbook|replace('_', ' ')|capitalize }}</strong><span>{{ job.plan.customer }} <span aria-hidden="true">&middot;</span> {{ job.plan.targets|length }} {{ 'host' if job.plan.targets|length == 1 else 'hosts' }} <span aria-hidden="true">&middot;</span> <span class="mode-tag">{{ job.mode }}</span></span></div>
  </div>
  <div class="credential-reservation"><span class="status-tag status-waiting_credentials">Awaiting credentials</span><span data-credential-countdown role="timer" aria-label="Reservation time remaining" aria-live="off">Until <time class="js-local-time" datetime="{{ job.credential_deadline|utc_iso }}">{{ job.credential_deadline|utc }}</time></span></div>
  <p class="credential-intro">Your reviewed scope and options stay unchanged.</p>
  <div class="credential-feedback" data-credential-feedback role="status" aria-live="polite" tabindex="-1" hidden></div>
  <form action="/jobs/{{ job.id }}/credentials" method="post" data-secret-form data-credential-form autocomplete="off">
    <input type="hidden" name="_csrf" value="{{ csrf }}">
    <fieldset class="credential-inputs" data-credential-inputs><legend class="visually-hidden">One-run credentials</legend>
      {% if has_vault %}{{ secret_field('vault_password', 'Customer Vault password', 'Unlock the Vault for this customer. This is not your AIM Web sign-in password.', true, 'vault') }}{% endif %}
      {% if has_connection %}{{ secret_field('connection_password', 'Default connection password', 'Requested by Core. Inventory-defined credentials take precedence; this is not a forced override.', true, 'connection') }}{% endif %}
      {% if has_key %}
      <fieldset class="credential-key-source"><legend>SSH key passphrase</legend>
        {% if key_from_vault %}
        <div class="credential-source-choice" data-key-source-choice hidden>
          <div class="btn-group credential-segments" role="group" aria-label="SSH key passphrase source">
            <input class="btn-check" type="radio" name="_key_source" id="credential-key-vault" value="vault" checked disabled autocomplete="off"><label class="btn btn-outline-secondary" for="credential-key-vault">Use customer Vault</label>
            <input class="btn-check" type="radio" name="_key_source" id="credential-key-separate" value="separate" disabled autocomplete="off"><label class="btn btn-outline-secondary" for="credential-key-separate">Enter separately</label>
          </div>
          <p class="form-text" data-key-source-explanation>Uses the Vault's stored key passphrase, checked after submission.</p>
        </div>
        {% endif %}
        <div data-key-passphrase-field data-optional-in-vault="{{ 'true' if key_from_vault else 'false' }}">{{ secret_field('ssh_key_passphrase', 'Separate SSH key passphrase', 'Leave blank to use the customer Vault value.' if key_from_vault else 'Unlock the encrypted customer private key for this run.', not key_from_vault, 'key') }}</div>
      </fieldset>
      {% endif %}
    </fieldset>
    <details class="credential-explanation"><summary>How credentials are used</summary><p>Used only for this job. AIM Web does not save passwords in plans, history or browser storage. Core performs Vault/key validation after the handoff; submission alone does not verify authentication.</p><p>Leaving this form does not cancel the job or extend its reservation. A submitted run continues independently.</p><p class="row-meta">Job {{ job.id[:12] }} &middot; {{ job.plan.targets|join(', ') }}</p></details>
    <p class="credential-privacy"><span aria-hidden="true">&#9671;</span> One run only. Not saved by AIM Web.</p>
    <div class="credential-submit-row">
      <button class="btn btn-primary" type="submit" data-credential-submit>Submit credentials and continue</button>
      <a class="btn btn-outline-secondary" href="/jobs/{{ job.id }}" data-credential-dismiss>Not now</a>
    </div>
    <p class="form-text credential-submit-note" data-credential-submit-note>Core validates the credentials next. No automatic retry.</p>
  </form>
</section>