{% 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://www.hubspot.com/" target="_blank">{name}</a> and login to your account.
1. Click on the settings icon on the top-right of the screen.
1. In the left-hand sidebar menu, click on **Integrations** → **Private Apps**.
1. Click the **Create a private app** button.
1. Fill out the details, and click the **Scopes** tab. Select the following scopes:
    - `crm.lists.read`
    - `crm.objects.companies.read`
    - `crm.objects.companies.write`
    - `crm.objects.contacts.read`
    - `crm.objects.contacts.write`
    - `crm.objects.deals.read`
    - `crm.objects.deals.write`
    - `forms`
1. Click the **Create App** button in the top right.
1. In the dialog box, review the info about your app's access token, then click **Continue creating**.
1. Copy the **Access Token** from {name} and paste in the **Access Token** field below.

### Step 2. Disable Automatic Form Collection
1. In HubSpot, click on the **Settings** cog icon in the top right-hand of the screen.
1. In the left-hand sidebar menu, click on **Marketing** → **Forms**.
1. Click the **Non-Hubspot Forms** button.
1. For **Collect data from website forms** ensure that this is switched to **Off**.

### Step 3. Test Connection
1. Save this integration.
1. Click on the **Refresh** button in the right-hand sidebar.
{% endset %}

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

{% 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: 'Access Token' | t('formie'),
    instructions: 'Enter your {name} {label} here.' | t('formie'),
    name: 'accessToken',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.accessToken ?? '',
    warning: macros.configWarning('accessToken', 'formie'),
    errors: integration.getErrors('accessToken'),
}) }}