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

{% set handle = integration.handle %}
{% set displayName = integration.displayName() %}
{% set formSettings = integration.getFormSettings().getSettings() %}
{% set webhook = form.settings.integrations[handle].webhook ?? null %}

<field-select
    label="{{ 'Opt-In Field' | t('formie') }}"
    instructions="{{ 'Choose a field to opt-in to {name}. For example, you might only wish to subscribe users if they provide a value for a field of your choice - commonly, an Agree field.' | t('formie', { name: displayName }) }}"
    id="opt-in-field"
    name="optInField"
    :value="get(form, 'settings.integrations.{{ handle }}.optInField')"
></field-select>

<hr>

{{ forms.textField({
    label: 'Webhook URL' | t('formie'),
    instructions: 'Enter the {name} webhook URL that will be triggered when a submission is made.' | t('formie', { name: displayName }),
    name: 'webhook',
    required: true,
    value: webhook ?? integration.settings.webhook ?? '',
    errors: integration.getErrors('webhook'),
}) }}

<integration-form-settings handle="{{ handle }}" :form-settings="{{ formSettings | json_encode }}">
    <template v-slot="{ get, isEmpty, input, settings, sourceId, loading, refresh, error, errorMessage, success, getSourceFields }">
        <div class="field">
            <button class="btn" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh">{{ 'Send Test Payload' | t('formie') }}</button>

            <div style="padding-top: 10px;">
                <span class="warning with-icon">{{ 'You must save your form before sending a test payload.' | t('formie') }}</span>
            </div>
        </div>

        <div v-if="error" class="error" style="margin-top: 10px;" v-cloak>
            <span data-icon="alert"></span>
            <span v-html="errorMessage"></span>
        </div>

        <div v-if="success" class="success" style="margin-top: 10px;" v-cloak>
            {{ 'Success!' | t('formie') }}<br>
            <pre><code v-if="get(settings, 'json')">${ get(settings, 'json') }</code><code v-else="get(settings, 'response')"><br>${ get(settings, 'response') }</code></pre>
        </div>
    </template>
</integration-form-settings>