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

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

{% set instructions %}
### Connect to the {name} API
1. Login to your <a href="https://account.loqate.com" target="_blank">{name}</a> account.
1. Click the **Add Service** button in the header.
1. Click **API Key** from the provided panes.
1. Copy the **API Key** and enter this in the **API Key** field below.
{% endset %}

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

{{ macros.proxyField(fieldVariables, 'autosuggestField', {
    label: 'API Key' | t('formie'),
    name: 'apiKey',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.apiKey ?? '',
    warning: macros.configWarning('apiKey', 'formie'),
    errors: integration.getErrors('apiKey'),
}) }}

{{ macros.proxyField(fieldVariables, 'editableTableField', {
    label: 'Reconfigurable Options' | t('formie'),
    instructions: 'Provide any additional options, as per the {link}.' | t('formie', { link: '[Loqate docs](https://www.loqate.com/resources/support/setup-guides/advanced-setup-guide/#setting_options)' }),
    id: 'reconfigurableOptions',
    name: 'reconfigurableOptions',
    cols: [
        {
            type: 'singleline',
            heading: 'Option' | t('formie'),
            width: '25%',
        },
        {
            type: 'singleline',
            heading: 'Value' | t('formie'),
        },
    ],
    rows: integration.settings.reconfigurableOptions ?? [],
    addRowLabel: 'Add an option' | t('formie'),
    warning: macros.configWarning('reconfigurableOptions', 'formie'),
    errors: integration.getErrors('reconfigurableOptions'),
    allowAdd: true,
    allowDelete: true,
    allowReorder: true,
}) }}