{% import "_includes/forms" as formFields %}

<style>
    #export-csv-modal .radio-list label {
        margin-right: 5px;
    }

    #export-csv-modal .body {
        overflow-y: auto;
        height: 380px;
        width: 400px;
    }

    #export-csv-modal .footer {
        line-height: normal !important;
    }

    #export-csv-modal .radio-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    #export-csv-modal .checkbox-list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: flex-start;
        width: fit-content;
    }

    #export-csv-modal .checkbox-list-item .icon {
        margin: 0;
        padding: 0;
    }

    #export-csv-modal .checkbox-list-item .icon:before {
        margin: 0;
        padding: 0;
        line-height: unset !important;
        vertical-align: middle !important;
    }
</style>

<form id="export-csv-modal" method="post">
    {{ csrfInput() }}
    <input type="hidden" name="action" value="freeform/export/quick-export" />
    <input type="hidden" name="spam" value="{{ isSpam ? '1' }}" />

    <div class="header">
        <h1>{{ 'Export data'|t('freeform') }}</h1>
    </div>
    <div class="body">
        <div class="field">
            <div class="heading">
                <label>{{ 'Export as'|t('freeform') }}</label>
            </div>
            <div class="select">
                <select class="select" name="export_type">
                    {% for type, exporter in exporters %}
                        <option value="{{ type }}">{{ exporter }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="field">
            <div class="heading">
                <label>{{ 'Form'|t('freeform') }}</label>
            </div>
            <div class="select">
                <select class="select" name="form_id">
                    {% for form in forms %}
                        <option value="{{ form.id }}" {{ form.id == selectedFormId ? 'selected' }}>
                            {{ form.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </div>

        {% for settingItem in setting %}
            {% set form = settingItem.form %}
            {% set fields = settingItem.fields %}

            <div class="form-field-list field" data-id="{{ form.id }}">
                <div class="heading">
                    <label>{{ ('Fields for'|t('freeform')) ~ " " ~ form.name }}</label>
                </div>
                <div class="checkbox-select">
                    {% for fieldId, fieldSetting in fields %}
                        {% set label     = fieldSetting.label %}
                        {% set isChecked = fieldSetting.checked %}

                        <div class="checkbox-list-item">
                            <div class="icon move">
                                <input
                                    type="hidden"
                                    name="export_fields[{{ form.id }}][{{ fieldId }}][label]"
                                    value="{{ fieldSetting.label }}"
                                />
                                <input type="hidden"
                                    name="export_fields[{{ form.id }}][{{ fieldId }}][checked]"
                                    value="0"
                                />
                                <input type="checkbox"
                                    class="checkbox"
                                    name="export_fields[{{ form.id }}][{{ fieldId }}][checked]"
                                    value="1"
                                    {{ isChecked ? 'checked' }}
                                    id="{{ form.id ~ '-' ~ fieldId }}"
                                />
                                <label for="{{ form.id ~ '-' ~ fieldId }}">{{ label }}</label>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}

    </div>
    <div class="footer">
        <div class="buttons right last">
            <input type="button" class="btn cancel" value="{{ 'Cancel'|t('freeform') }}"/>
            <input type="submit" class="btn submit" value="{{ 'Export'|t('freeform') }}"/>

            <div class="spinner" style="display: none;"></div>
        </div>
    </div>
</form>

<script>
  (function() {
    var form = document.getElementById('export-csv-modal');
    form.addEventListener('submit', function (event) {
      var hiddenFormInputs = form.querySelectorAll('.form-field-list.hidden');
      for (var i = 0; i < hiddenFormInputs.length; i++) {
        hiddenFormInputs[i].remove();
      }

      return true;
    });
    setTimeout(function() {
        var formFieldLists = form.querySelectorAll('.form-field-list');
        for (var i in formFieldLists) {
            if (formFieldLists.hasOwnProperty(i)) {
                if (formFieldLists[i].getAttribute('data-id') !== '{{ selectedFormId }}') {
                    formFieldLists[i].classList.add('hidden');
                }
            }
        }
    }, 1000);
  })();
</script>
