{% import '_includes/forms' as forms %}
{% import 'verbb-base/_macros' as macros %}

{% set displayName = integration.displayName() %}

{% set instructions %}
### Step 1. Connect to the {name} API
1. Go to <a href="https://accounts.zoho.com/developerconsole" target="_blank">{name} API Console</a> and login to your account.
1. Click the **Add Client** button.
1. Click **Server-based Applications**.
1. In the **Authorized Redirect URIs** field, enter the value from the **Redirect URI** field below.
1. Copy the **Client ID** from {name} and paste in the **Client ID** field below.
1. Copy the **Client Secret** from {name} and paste in the **Client Secret** field below.

### Step 2. Test Connection
1. Save this integration.
1. Click on the **Connect** button in the right-hand sidebar.
1. You‘ll be redirected to {name}, where you must approve Formie to access your {name} account.
{% endset %}

<div class="fui-settings-block">
    {{ instructions | t('formie', { name: displayName }) | md }}
</div>

{{ macros.proxyField(fieldVariables, 'textField', {
    readonly: true,
    label: 'Redirect URI' | t('formie'),
    instructions: 'Use this URI when setting up your {name} app.' | t('formie'),
    value: integration.getRedirectUri(),
}) }}

{% if not craft.app.config.general.allowAdminChanges %}
    <span class="warning with-icon">
        {{ 'Integration settings can only be editable on an environment with `allowAdminChanges` enabled.' | t('formie') | md(inlineOnly=true) }}
    </span>
{% endif %}

{{ macros.proxyField(fieldVariables, 'autosuggestField', {
    label: 'Client ID' | t('formie'),
    instructions: 'Enter your {name} {label} here.' | t('formie'),
    name: 'clientId',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.clientId ?? '',
    warning: macros.configWarning('clientId', 'formie'),
    errors: integration.getErrors('clientId'),
}) }}

{{ macros.proxyField(fieldVariables, 'autosuggestField', {
    label: 'Client Secret' | t('formie'),
    instructions: 'Enter your {name} {label} here.' | t('formie'),
    name: 'clientSecret',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.clientSecret ?? '',
    warning: macros.configWarning('clientSecret', 'formie'),
    errors: integration.getErrors('clientSecret'),
}) }}

{{ macros.proxyField(fieldVariables, 'booleanMenuField', {
    label: 'Use Developer API' | t('formie'),
    instructions: 'Whether to use the {name} developer API. Only use this for specific {name} developer accounts.' | t('formie'),
    name: 'useDeveloper',
    includeEnvVars: true,
    value: integration.settings.useDeveloper ?? false,
    warning: macros.configWarning('useDeveloper', 'formie'),
    errors: integration.getErrors('useDeveloper'),
}) }}

{{ macros.proxyField(fieldVariables, 'selectField', {
    label: 'Data Center' | t('formie'),
    instructions: 'Select your {name} {label} here.' | t('formie'),
    name: 'dataCenter',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.dataCenter ?? '',
    options: [
        { label: 'US' | t('formie'), value: 'US' },
        { label: 'AU' | t('formie'), value: 'AU' },
        { label: 'EU' | t('formie'), value: 'EU' },
        { label: 'IN' | t('formie'), value: 'IN' },
        { label: 'CN' | t('formie'), value: 'CN' },
        { label: 'JP' | t('formie'), value: 'JP' },
        { label: 'CA' | t('formie'), value: 'CA' },
    ],
    warning: macros.configWarning('dataCenter', 'formie'),
    errors: integration.getErrors('dataCenter'),
}) }}