{# Plan 40 Phase 5 — set / rotate fleet bot password.
   Mode flips text + button label. Min 8 chars (server-side too).
   On submit, calls /api/admin/bots/password and shows the success toast.
   Chrome (teleport + backdrop + centered card) comes from the shared
   `modal()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import modal %}
{% call modal('passwordModalOpen', 'closePasswordModal()') %}
    <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1"
        x-text="passwordModalMode === 'set' ? 'Set bot password' : 'Rotate bot password'"></h3>
    <p class="text-[11px] text-ink-500 mb-4"
       x-text="passwordModalMode === 'set'
         ? 'Users will run /auth <password> in the bot to gain access.'
         : 'Bumps the generation. Every previously-authorized user must re-run /auth with the NEW password.'"></p>

    <form @submit.prevent="submitPassword()" class="space-y-4">
      <div>
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-1.5">New password</label>
        <input
          type="password"
          x-model="passwordModalValue"
          required
          minlength="8"
          autocomplete="new-password"
          class="w-full rounded-md bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 px-3 py-2 text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
          placeholder="At least 8 characters"
        />
      </div>
      <div>
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-1.5">Confirm</label>
        <input
          type="password"
          x-model="passwordModalConfirm"
          required
          minlength="8"
          class="w-full rounded-md bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 px-3 py-2 text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
        />
      </div>
      <div x-show="passwordModalError" x-cloak class="text-[13px] text-red-300" x-text="passwordModalError"></div>
      <div class="flex justify-end gap-3 pt-2">
        <button type="button" @click="closePasswordModal()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="submit"
                :disabled="passwordModalBusy"
                class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-40">
          <span x-text="passwordModalBusy ? 'Saving…' : (passwordModalMode === 'set' ? 'Set password' : 'Rotate password')"></span>
        </button>
      </div>
    </form>
{% endcall %}