{% 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://www.algolia.com/apps" target="_blank">Algolia</a> account.
1. In the left-hand sidebar, click **API Keys**.
1. Copy the **Application ID** and enter this in the **App ID** field below.
1. Copy the **Search-Only 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: 'App ID' | t('formie'),
    name: 'appId',
    required: true,
    suggestEnvVars: true,
    value: integration.settings.appId ?? '',
    warning: macros.configWarning('appId', 'formie'),
    errors: integration.getErrors('appId'),
}) }}

{{ 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: '[Algolia Places docs](https://community.algolia.com/places/documentation.html#api-options-type)' }),
    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,
}) }}