[%#
    Shared MCP Configuration Form Content
    
    This template contains the common form elements for both WHM and cPanel MCP interfaces.
    
    Required parameters:
    - mcp_port: The port number (2087 for WHM, 2083 for cPanel)
    - mcp_auth_type: The authentication type ('whm' or 'cpanel')
    - mcp_hostname: The server hostname
    - mcp_username: The username for the auth header template
    - mcp_form_action: The form action URL
    - mcp_token_create_url: URL to create tokens
    - mcp_token_help_text: Help text for token input
    - mcp_icon_download: Icon class for download (fa fa-download or glyphicon glyphicon-download-alt)
    - mcp_icon_settings: Icon class for settings (fa fa-cog or glyphicon glyphicon-cog)
    - mcp_icon_copy: Icon class for copy (fa fa-copy or glyphicon glyphicon-copy)
    - mcp_icon_check: Icon class for check (fa fa-check or glyphicon glyphicon-ok)
    - mcp_icon_external: Icon class for external link (fa fa-external-link or glyphicon glyphicon-new-window)
%]

<div id="errorAlert" class="alert alert-danger" style="display: none;">
    <strong>[% locale.maketext("Error:") %]</strong> <span id="errorMessage"></span>
</div>

<div class="mcp-flex-container">
    <!-- Download Configuration Panel -->
    <div class="mcp-panel">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="[% mcp_icon_download %]"></span>
                    [% locale.maketext("Download Configuration") %]
                </h3>
            </div>
            <div class="panel-body">
                <form id="configForm" method="POST" action="[% mcp_form_action %]">
                    <input type="hidden" name="action" value="download_config">
                    <input type="hidden" name="hostname" id="hostnameField" value="">

                    <div class="form-group">
                        <label for="tokenInput">
                            <strong>[% locale.maketext("Step 1:") %]</strong> [% locale.maketext("API Token") %]
                        </label>
                        <input type="text"
                               id="tokenInput"
                               name="token"
                               class="form-control"
                               placeholder="[% locale.maketext('Enter your API token.') %]"
                               style="font-family: monospace;"
                               required>
                        <p class="help-block">
                            [% mcp_token_help_text %]
                            <a href="[% mcp_token_create_url %]" target="_blank">
                                [% locale.maketext("Manage API Tokens") %] <span class="[% mcp_icon_external %]"></span>
                            </a>
                        </p>
                    </div>

                    <div class="form-group">
                        <label for="clientSelect">
                            <strong>[% locale.maketext("Step 2:") %]</strong> [% locale.maketext("Client Type") %]
                        </label>
                        <select id="clientSelect" name="client" class="form-control">
                            <option value="vscode">[% "VS Code" %]</option>
                            <option value="continue">[% "Continue.dev" %]</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label><strong>[% locale.maketext("Step 3:") %]</strong> [% locale.maketext("Download") %]</label>
                        <div>
                            <button type="submit" class="btn btn-success btn-block">
                                <span class="[% mcp_icon_download %]"></span> [% locale.maketext("Download Configuration File") %]
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Manual Configuration Panel -->
    <div class="mcp-panel">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="[% mcp_icon_settings %]"></span>
                    [% locale.maketext("Manual Connection Details") %]
                </h3>
            </div>
            <div class="panel-body">
                <p class="text-muted">[% locale.maketext("Use these details to manually configure your MCP client.") %]</p>

                <div class="form-group">
                    <label>[% locale.maketext("Server URL") %]</label>
                    <div class="input-group">
                        <input type="text"
                               id="mcpServerUrl"
                               class="form-control"
                               value=""
                               readonly
                               style="font-family: monospace;">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="mcpCopyToClipboard('mcpServerUrl');" title="[% locale.maketext('Copy to clipboard.') %]">
                                <span class="[% mcp_icon_copy %]"></span>
                            </button>
                        </span>
                    </div>
                    <p class="help-block">[% locale.maketext("This URL is automatically set based on how you are accessing this interface.") %]</p>
                </div>

                <div class="form-group">
                    <label>[% locale.maketext("Type") %]</label>
                    <p class="form-control-static">HTTP</p>
                </div>

                <div class="form-group">
                    <label>[% locale.maketext("Authorization Header") %]</label>
                    <div class="input-group">
                        <input type="text"
                               id="mcpAuthHeader"
                               class="form-control"
                               value="[% mcp_auth_type %] [% mcp_username %]:YOUR_TOKEN_HERE"
                               readonly
                               style="font-family: monospace;">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="mcpCopyToClipboard('mcpAuthHeader');" title="[% locale.maketext('Copy to clipboard.') %]">
                                <span class="[% mcp_icon_copy %]"></span>
                            </button>
                        </span>
                    </div>
                    <p class="help-block">[% locale.maketext("Replace YOUR_TOKEN_HERE with your token.") %]</p>
                </div>

                <div class="form-group">
                    <label>[% locale.maketext("Content-Type Header") %]</label>
                    <div class="input-group">
                        <input type="text"
                               id="mcpContentType"
                               class="form-control"
                               value="application/json"
                               readonly
                               style="font-family: monospace;">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="mcpCopyToClipboard('mcpContentType');" title="[% locale.maketext('Copy to clipboard.') %]">
                                <span class="[% mcp_icon_copy %]"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .mcp-flex-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    .mcp-panel {
        flex: 1 1 450px;
        min-width: 0;
    }

    .mcp-panel .panel {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mcp-panel .panel-body {
        flex: 1;
    }

    @media (max-width: 991px) {
        .mcp-panel {
            flex: 1 1 100%;
        }
    }
</style>

<script type="text/javascript">
// Initialize hostname field and manual configuration on page load
(function() {
    var currentHost = window.location.host;
    
    // Set the hidden hostname field
    var hostnameField = document.getElementById('hostnameField');
    if (hostnameField) {
        hostnameField.value = currentHost;
    }
    
    // Update the manual configuration server URL to match current host
    var serverUrlField = document.getElementById('mcpServerUrl');
    if (serverUrlField) {
        serverUrlField.value = 'https://' + currentHost + '/mcp';
    }
    
    // Update the Authorization header when token is entered
    var tokenInput = document.getElementById('tokenInput');
    var authHeader = document.getElementById('mcpAuthHeader');
    
    if (tokenInput && authHeader) {
        // Store the original template for reference
        var authTemplate = authHeader.value;
        
        tokenInput.addEventListener('input', function() {
            var token = tokenInput.value.trim();
            
            if (token) {
                // Replace YOUR_TOKEN_HERE with the actual token
                authHeader.value = authTemplate.replace('YOUR_TOKEN_HERE', token);
            } else {
                // Restore the template if token is cleared
                authHeader.value = authTemplate;
            }
        });
    }
})();

function mcpCopyToClipboard(inputId) {
    var inputElement = document.getElementById(inputId);
    if (inputElement) {
        inputElement.select();
        inputElement.setSelectionRange(0, 99999); // For mobile devices

        try {
            document.execCommand('copy');

            // Visual feedback
            var btn = inputElement.parentElement.querySelector('.btn');
            var originalHTML = btn.innerHTML;
            btn.innerHTML = '<span class="[% mcp_icon_check %]"></span>';
            btn.classList.add('btn-success');
            btn.classList.remove('btn-default');

            setTimeout(function() {
                btn.innerHTML = originalHTML;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-default');
            }, 2000);
        } catch (err) {
            console.error('Failed to copy:', err);
        }
    }
}
</script>