auth_panel.html

<div class="auth-panel-header-bar" id="authPanelHeader">
    <div class="auth-panel-left">
        <a href="../index.html" class="logo-link">
            <img src="{{ icons_path }}/mulesoft-dev-logo.svg" alt="MuleSoft Dev" class="mulesoft-dev-logo">
        </a>
    </div>
    <div class="auth-panel-center">
        <h1 class="api-title"><a href="#overview" class="api-title-link">{{ api_name }}</a></h1>
        <span class="badge badge-version">{{ api_version }}</span>
        {% if is_skill_page and not prose_only %}
        <div class="skill-mode-toggle-container">
            <label class="toggle-switch-label">
                <span class="toggle-label-text">Interactive Mode</span>
                <div class="toggle-switch" onclick="toggleSkillMode('{{ skill_slug }}')" role="switch" aria-checked="false" aria-label="Toggle interactive mode" id="toggle-{{ skill_slug }}">
                    <div class="toggle-slider"></div>
                </div>
            </label>
        </div>
        {% endif %}
    </div>
    <div class="auth-panel-right">
        <button class="auth-panel-status" onclick="openAuthModal()" aria-label="Open authentication modal">
            <span class="auth-status-container" id="authStatusContainer">
                <img class="auth-status-dot" id="authStatusDot" src="{{ icons_path }}/status-dot-red.svg" alt="" aria-hidden="true">
                <span class="auth-status-text" id="authStatusText">Not authenticated</span>
                <img class="auth-lock-icon" id="authLockIcon" src="{{ icons_path }}/lock-red.svg" alt="" aria-hidden="true">
            </span>
            <span class="auth-info-container">
                <span class="auth-user-section" id="authUserSection" style="display:none">
                    <span class="auth-summary-label">User</span>
                    <span class="auth-summary-value" id="authUserText">—</span>
                </span>
                <span class="auth-info-separator" id="authInfoSeparator" style="display:none">|</span>
                <span class="auth-region-section">
                    <span class="auth-summary-label">Region</span>
                    <span class="auth-summary-value" id="authRegionText">US</span>
                </span>
            </span>
        </button>
    </div>
</div>

<div class="auth-modal" id="authModal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="authModalTitle">
    <div class="auth-modal-overlay" onclick="closeAuthModal()"></div>
    <div class="auth-modal-content">
        <div class="auth-modal-header">
            <h3 id="authModalTitle">Authentication and Context</h3>
            <button class="btn-close-modal" onclick="closeAuthModal()" aria-label="Close modal">✕</button>
        </div>
        <div class="auth-modal-body" id="authPanelBody">
            <!-- Server Selection Section -->
            <div class="auth-section server-section">
                <h4>Server</h4>
                <div class="server-select-wrapper">
                    <select id="serverSelect" onchange="onServerChange()" class="server-select" aria-label="Select Anypoint Platform Server">
                        <option value="us">anypoint.mulesoft.com (US)</option>
                        <option value="eu">eu1.anypoint.mulesoft.com (EU)</option>
                        <option value="platform">Regional (platform.mulesoft.com)</option>
                    </select>
                </div>
                <div class="server-region-row" id="serverRegionRow" style="display:none">
                    <select id="regionPreset" onchange="onRegionPresetChange()" class="server-select region-preset-select" aria-label="Select region">
                        <option value="ca1">Canada (ca1)</option>
                        <option value="custom">Custom</option>
                    </select>
                    <input type="text" id="regionCustomInput" class="server-var-input" placeholder="e.g. ca1" style="display:none" aria-label="Custom region">
                </div>
            </div>

            <div class="auth-tabs">
                <button class="auth-tab active" data-tab="bearer" onclick="switchAuthTab('bearer')">
                    Bearer Token (User)
                </button>
                <button class="auth-tab" data-tab="oauth2" onclick="switchAuthTab('oauth2')">
                    OAuth2 (Client)
                </button>
            </div>

            <div class="auth-tab-content active" id="authTabBearer">
                <div class="auth-form">
                    <input id="authUsername" type="text" placeholder="Username" autocomplete="username" aria-label="Username">
                    <input id="authPassword" type="password" placeholder="Password" autocomplete="current-password" aria-label="Password">
                    <button class="btn-auth-login" onclick="loginBearer()">Login</button>
                </div>
            </div>

            <div class="auth-tab-content" id="authTabOauth2">
                <div class="auth-form">
                    <input id="authClientId" type="text" placeholder="Client Id" aria-label="Client Id">
                    <input id="authClientSecret" type="password" placeholder="Client Secret" aria-label="Client Secret">
                    <button class="btn-auth-login" onclick="loginOAuth2()">Get Token</button>
                </div>
            </div>

            <div class="env-vars-section">
                <div class="env-vars-header">
                    <h4>Context Variables</h4>
                    <button class="btn-env-add" onclick="addEnvVar()">+ Add Variable</button>
                </div>
                <div class="env-vars-list" id="envVarsList"></div>
            </div>
            <div class="auth-message" id="authMessage"></div>
        </div>
    </div>
</div>