{% 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 cardName = form.settings.integrations[handle].cardName ?? '' %}

{% set values = {
    boardId: form.settings.integrations[handle].boardId ?? '',
    listId: form.settings.integrations[handle].listId ?? '',
    cardName: form.settings.integrations[handle].cardName ?? '',
    cardDescription: form.settings.integrations[handle].cardDescription ?? '',
} | json_encode %}

<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>

<integration-form-settings handle="{{ handle }}" :form-settings="{{ formSettings | json_encode }}" :values="{{ values }}">
    <template v-slot="{ get, isEmpty, input, settings, sourceId, loading, refresh, error, errorMessage, getSourceFields, model }">
        <div class="field">
            <div class="heading">
                <label id="boardId-label" for="boardId" class="required">{{ 'Board' | t('formie') }}</label>

                <div class="instructions">
                    <p>{{ 'Select which {name} board to add a card to.' | t('formie', { name: displayName }) }}</p>
                </div>
            </div>

            <div class="input ltr">
                <div class="select">
                    <select :value="model.boardId" @input="input('model.boardId', $event.target.value)" name="boardId" required>
                        <option value="">{{ 'Select an option' | t('formie') }}</option>

                        <option v-for="(option, index) in get(settings, 'boards')" :key="index" :value="option.id">${ option.name }</option>
                    </select>
                </div>

                <button class="btn fui-btn-transparent" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh"></button>
            </div>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.boardId'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.boardId')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        <div class="field">
            <div class="heading">
                <label id="listId-label" for="listId" class="required">{{ 'List' | t('formie') }}</label>

                <div class="instructions">
                    <p>{{ 'Select which {name} list to add a card to.' | t('formie', { name: displayName }) }}</p>
                </div>
            </div>

            <div class="input ltr">
                <div class="select">
                    <select :value="model.listId" @input="input('model.listId', $event.target.value)" name="listId" required>
                        <option value="">{{ 'Select an option' | t('formie') }}</option>

                        <option v-for="(option, index) in get(settings, 'boards.' + model.boardId + '.lists')" :key="index" :value="option.id">${ option.name }</option>
                    </select>
                </div>

                <button class="btn fui-btn-transparent" :class="{ 'fui-loading fui-loading-sm': loading }" data-icon="refresh" @click.prevent="refresh"></button>
            </div>

            <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.listId'))" class="errors" v-cloak>
                <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.listId')" :key="index">
                    ${ error }
                </li>
            </ul>
        </div>

        {{ forms.textField({
            label: 'Card Name' | t('formie'),
            instructions: 'This text will be sent to {name}.' | t('formie', { name: displayName }),
            name: 'cardName',
            required: true,
            value: cardName ?? '',
        }) }}

        <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.cardName'))" class="errors" v-cloak>
            <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.cardName')" :key="index">
                ${ error }
            </li>
        </ul>

        <form-kit
            type="richText"
            label="{{ 'Card Description' | t('formie') }}"
            help="{{ 'This text will be sent to {name}.' | t('formie', { name: displayName }) }}"
            v-model="model.cardDescription" 
            :required="true"
            variables="plainTextVariables"
            :buttons="['bold', 'italic', 'variableTag']"
        ></form-kit>

        <input type="hidden" name="cardDescription" :value="model.cardDescription" />

        <ul v-if="!isEmpty(get(form, 'settings.integrations.{{ handle }}.errors.cardDescription'))" class="errors" v-cloak>
            <li v-for="(error, index) in get(form, 'settings.integrations.{{ handle }}.errors.cardDescription')" :key="index">
                ${ error }
            </li>
        </ul>
    </template>
</integration-form-settings>