{{#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}}">

    {{!-- State 1: Standard Login (Default) --}}
    <div id="login-section" class="state-section">
        <h1>System Access</h1>
        <p>Authenticate to access protected services on jasonpoage.com.</p>

        <form id="auth-form" method="POST" action="/api/login">
            <input type="hidden" name="rd" value="{{redirectUri}}">
            <div class="input-group-vertical">
                <input type="text" name="username" placeholder="Username" required autocomplete="username">
                <input type="password" name="password" placeholder="Security Key" required autocomplete="current-password">
                <button type="submit" class="btn-primary">SIGN IN</button>
            </div>
        </form>

        <div class="alt-actions">
            <button id="show-token-entry-btn" class="btn-outline">USE ACCESS TOKEN</button>
            <button id="request-token-btn" class="btn-outline">REQUEST AUTHORIZATION</button>
        </div>
    </div>

    {{!-- State 2: Token Entry --}}
    <div id="token-entry-section" class="state-section hidden">
        <h1>Provision Account</h1>
        <p>Enter your unique provisioning token to generate session credentials.</p>
        <div class="input-group">
            <input type="text" id="token-input-field" placeholder="Token ID" class="token-input">
            <button id="submit-token-btn" class="btn-primary">INITIALIZE</button>
        </div>
        <button class="back-link-btn">← Return to Login</button>
    </div>

    {{!-- State 3: Credential Reveal & Enforcement --}}
    <div id="credential-section" class="state-section hidden">
        <div class="status" id="reveal-message">Identity Initialized</div>
        <div class="credential-box">
            <div class="field">
                <span class="label">Internal UID</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">Security Key</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="enforcement-zone">
            <label class="checkbox-container">
                <input type="checkbox" id="save-check">
                <span class="checkmark"></span>
                I have secured these credentials. I acknowledge they are non-recoverable.
            </label>
            <button id="return-to-login-btn" class="btn-disabled" disabled>FINISH & SIGN IN</button>
        </div>
    </div>
</div>