{% extends 'admin.twig' %}

{% set title %}{{ 'McpServer_ConnectPageTitle'|translate }}{% endset %}

{% block content %}
<div class="mcpServerConnect">
    <div class="card">
        <div class="card-content">
            <h2>{{ 'McpServer_ConnectPageTitle'|translate }}</h2>
            <p>
                {% if isOAuth2Enabled %}
                    {{ 'McpServer_ConnectIntroOAuth2Preferred'|translate }}
                {% else %}
                    {{ 'McpServer_ConnectIntro'|translate }}
                {% endif %}
            </p>
            {% if isMcpEnabled and canAccessMcpSettings %}
                <p>
                    {{ 'McpServer_ConnectGeneralSettingsHelp'|translate('<a href="' ~ mcpSettingsUrl|escape('html_attr') ~ '">', '</a>')|raw }}
                </p>
            {% endif %}
            {% if isMcpEnabled %}
                <h3>{{ 'McpServer_ConnectWhatYouNeedTitle'|translate }}</h3>
                <ul class="browser-default">
                    <li>{{ 'McpServer_ConnectNeedEndpoint'|translate }}</li>
                    {% if isOAuth2Enabled %}
                        {% if canManageOAuth2Clients %}
                            <li>{{ 'McpServer_ConnectNeedOAuth2Client'|translate }}</li>
                        {% else %}
                            <li>{{ 'McpServer_ConnectNeedOAuth2ClientNoPermission'|translate }}</li>
                        {% endif %}
                        <li>{{ 'McpServer_ConnectNeedAuthMethod'|translate }}</li>
                        <li>{{ 'McpServer_ConnectNeedTokenAlternative'|translate('<code>', '</code>')|raw }}</li>
                    {% else %}
                        <li>{{ 'McpServer_ConnectNeedToken'|translate('<code>', '</code>')|raw }}</li>
                    {% endif %}
                </ul>
            {% endif %}
            {% if not isMcpEnabled %}
                <div class="alert alert-warning">
                    {% if canAccessMcpSettings %}
                        {{ 'McpServer_ConnectMcpDisabledCanEnable'|translate('<a href="' ~ mcpSettingsUrl|escape('html_attr') ~ '">', '</a>')|raw }}
                    {% else %}
                        {{ 'McpServer_ConnectMcpDisabledNoPermission'|translate }} {{ 'General_PleaseContactYourPiwikAdministrator'|translate }}
                    {% endif %}
                </div>
            {% endif %}
        </div>
        {% if isMcpEnabled %}
        <div class="card-action">
            {{ 'General_GoTo2'|translate }}:
            <a href="#/endpoint">{{ 'McpServer_ConnectEndpointTitle'|translate }}</a>
            <a href="#/set-up-client">{{ 'McpServer_ConnectInClientTitle'|translate }}</a>
            <a href="#/troubleshooting">{{ 'McpServer_ConnectTroubleshootingTitle'|translate }}</a>
        </div>
        {% endif %}
    </div>

    {% if isMcpEnabled %}
        <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectEndpointTitle'|translate }}" anchor="endpoint">
            <p>{{ 'McpServer_ConnectEndpointDescription'|translate }}</p>
            <div class="mcpServerCopyField">
                <pre class="mcpServerLongCode mcpServerCopyValue" vue-directive="CoreHome.CopyToClipboard">{{ mcpApiEndpoint }}</pre>
            </div>
        </div>

        <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectInClientTitle'|translate }}" anchor="set-up-client">
            <ol>
                <li>{{ 'McpServer_ConnectInClientStepOpenSettings'|translate }}</li>
                <li>{{ 'McpServer_ConnectInClientStepEndpoint'|translate }} <code class="mcpServerLongCode">{{ mcpApiEndpoint }}</code></li>
                {% if isOAuth2Enabled %}
                    <li>{{ 'McpServer_ConnectInClientStepChooseAuth'|translate }}</li>
                    <li>{{ 'McpServer_ConnectInClientStepAuthOAuth2Preferred'|translate }}</li>
                    <li>{{ 'McpServer_ConnectInClientStepAuthTokenAlternative'|translate('<code>', '</code>')|raw }}</li>
                {% else %}
                    <li>
                        {{ 'McpServer_ConnectInClientStepAuth'|translate }}
                        <ul class="browser-default">
                            <li>{{ 'McpServer_ConnectInClientAuthType'|translate('<strong>', '</strong>')|raw }}</li>
                            <li>{{ 'McpServer_ConnectInClientAuthToken'|translate('<strong>', '</strong>', '<code>', '</code>')|raw }}</li>
                        </ul>
                    </li>
                {% endif %}
                <li>{{ 'McpServer_ConnectInClientStepInitialize'|translate }}</li>
            </ol>
            {% if isOAuth2Enabled %}
                <h3>{{ 'McpServer_ConnectOAuth2Title'|translate }}</h3>
                <p>
                    {% if canManageOAuth2Clients %}
                        {{ 'McpServer_ConnectOAuth2HelpLink'|translate('<a href="' ~ oauth2ClientManagementUrl|escape('html_attr') ~ '">', '</a>')|raw }}
                    {% else %}
                        {{ 'McpServer_ConnectOAuth2HelpNoPermission'|translate }}
                    {% endif %}
                </p>
                <h3>{{ 'McpServer_ConnectTokenAlternativeTitle'|translate }}</h3>
                <p>{{ 'McpServer_ConnectInClientTokenHelpAlternative'|translate('<code>', '</code>', '<a href="' ~ userSecurityUrl|escape('html_attr') ~ '">', '</a>', '<code>', '</code>')|raw }}</p>
            {% else %}
                <h3>{{ 'McpServer_ConnectTokenTitle'|translate }}</h3>
                <p>{{ 'McpServer_ConnectInClientTokenHelp'|translate('<a href="' ~ userSecurityUrl|escape('html_attr') ~ '">', '</a>', '<code>', '</code>', externallink('https://matomo.org/faq/general/faq_114/'), '</a>')|raw }}</p>
            {% endif %}
        </div>

        <div vue-entry="CoreHome.ContentBlock" content-title="{{ 'McpServer_ConnectTroubleshootingTitle'|translate }}" anchor="troubleshooting">
            <ul class="browser-default">
                <li>
                    <strong><code>401</code></strong>:
                    {% if isOAuth2Enabled %}
                        {{ 'McpServer_ConnectTroubleshooting401OAuth2'|translate }}
                    {% else %}
                        {{ 'McpServer_ConnectTroubleshooting401'|translate }}
                    {% endif %}
                    <br />
                    {% if isOAuth2Enabled %}
                        {{ 'McpServer_ConnectTroubleshooting401ActionOAuth2'|translate('<code>', '</code>', '<code>', '</code>')|raw }}
                    {% else %}
                        {{ 'McpServer_ConnectTroubleshooting401Action'|translate('<code>', '</code>')|raw }}
                    {% endif %}
                </li>
                <li>
                    <strong><code>403</code></strong>: {{ 'McpServer_ConnectTroubleshooting403'|translate }}
                    <br />
                    {{ 'McpServer_ConnectTroubleshooting403Action'|translate }}
                </li>
                <li>
                    <strong><code>400</code></strong>: {{ 'McpServer_ConnectTroubleshooting400'|translate }}
                    <br />
                    {{ 'McpServer_ConnectTroubleshooting400Action'|translate }}
                </li>
            </ul>
        </div>
    {% endif %}
</div>
{% endblock %}
