{{#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"
  {{#with userdata}}
    {{#if token}}
      data-token="{{token}}"
    {{/if}}
    {{#if authenticated}}
      data-authenticated="{{isAuthenticated}}"
      data-username="{{preferred_username}}"
      data-groups="{{groups}}"
    {{/if}}
  {{/with}}
  {{#with endpoints}}
    data-reveal-base="{{revealBase}}"
    data-auth-endpoint="{{authEndpoint}}"
    data-login-path="{{loginPath}}"
    data-status-endpoint="{{statusEndpoint}}"
    data-logout-endpoint="{{logoutEndpoint}}"
    data-default-redirect="{{defaultRedirect}}">
  {{/with}}

    {{!-- 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">
            <div class="input-group-vertical">
                <input type="text" id="login-username" placeholder="Username" required autocomplete="username">
                <input type="password" id="login-password" placeholder="Passphrase" required autocomplete="current-password">
                <div class="remember-group">
                  <input type="checkbox" id="login-remember" name="keepMeLoggedIn">
                  <label for="login-remember">Keep me signed in</label>
              </div>
                <button type="submit" class="btn-primary" id="login-submit-btn">SIGN IN</button>
            </div>
            <div id="login-error" class="error-text hidden"></div>
        </form>

        <div class="alt-actions">
            <button id="show-token-entry-btn" class="btn-outline">ENTER INVITATION CODE</button>
            <button id="request-token-btn" class="btn-outline">REQUEST ACCESS</button>
        </div>
    </div>

    {{!-- State 2: Token Entry --}}
    <div id="token-entry-section" class="state-section hidden">
        <h1>Activate Access</h1>
        <p>Provide your invitation code to continue.</p>
        <div class="input-group">
            <input type="text" id="token-input-field" placeholder="Invitation ID" class="token-input">
            <button id="submit-token-btn" class="btn-primary">NEXT</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">Account Ready</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">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>

    {{!-- State 4: Active Session / Logout --}}
    <div id="logout-section" class="state-section hidden">
        <h1>Active Session</h1>
        <p>You are currently authenticated as <span id="session-username" class="value"></span>.</p>

        <div class="input-group-vertical">
            <button id="logout-btn" class="btn-primary">SIGN OUT</button>
            <button id="continue-btn" class="btn-outline hidden">CONTINUE TO SERVICE</button>
        </div>
    </div>
    {{!-- State 5: Logout Success --}}
    <div id="logout-success-section" class="state-section hidden">
        <h1>Logout Successful</h1>
        <p>Your local session has been terminated and security headers cleared.</p>

        <div class="input-group-vertical">
            <button id="re-login-btn" class="btn-primary">RETURN TO LOGIN</button>
            <a href="/" class="btn-outline" style="text-align: center; text-decoration: none;">RETURN TO SITE HOME</a>
        </div>
    </div>
</div>