{{#section "scripts"}}
  <script type="module" src="{{baseUrl}}/static/js/credentialManager.js"></script>
{{/section}}

{{#section "styles"}}
  <link rel="stylesheet" href="{{baseUrl}}/static/css/credentialManager.css">
{{/section}}

<div class="container" id="manager-container" data-token="{{token}}">
    {{!-- Initial State: Reveal Button --}}
    {{#if token}}
      {{!-- State: Token Provided via URL --}}
      <div id="reveal-section" class="state-section">
          <h1>Portfolio Access</h1>
          <p>Click the button below to generate your one-time credentials.</p>
          <button id="reveal-btn">GET CREDENTIALS</button>
      </div>
    {{else}}
      {{!-- State: Manual Token Entry Required --}}
      <div id="manual-section" class="state-section">
          <h1>Manual Access</h1>
          <p>No access token detected. Please enter your token manually to continue.</p>
          <div class="input-group">
              <input type="text" id="manual-token-input" placeholder="Paste token here..." class="token-input">
              <button id="submit-token-btn">VALIDATE TOKEN</button>
          </div>
          <div id="manual-error" class="error-text hidden">Invalid or missing token format.</div>
      </div>
    {{/if}}

    {{!-- Result State: Credentials (Hidden Initially) --}}
    <div id="credential-section" class="state-section hidden">
        <div class="status" id="reveal-message"></div>

        <div class="credential-box">
            <div class="field">
                <span class="label">Username</span>
                <div class="value-wrapper">
                    <span class="value" id="username"></span>
                    <button id="copy-user-btn" class="copy-btn-small">Copy</button>
                </div>
            </div>
            <div class="field">
                <span class="label">Passphrase</span>
                <div class="value-wrapper">
                    <span class="value" id="password"></span>
                    <button id="copy-pass-btn" class="copy-btn-small">Copy</button>
                </div>
            </div>
        </div>

        <div class="warning">
            This token has been consumed. Store these credentials safely.
        </div>
    </div>
</div>