{% css formCss %}

{{ form.renderTag }}

<script>
  var form = document.querySelector('[data-id="{{ form.anchor }}"]');
  if (form) {
    form.addEventListener("freeform-ready", function (event) {
      var freeform = event.target.freeform;

      freeform.setOption("errorClassBanner", ["alert", "alert-danger", "errors"]);
      freeform.setOption("errorClassList", ["help-block", "errors", "has-error"]);
      freeform.setOption("errorClassField", "has-error");
      freeform.setOption("successClassBanner", ["alert", "alert-success", "form-success"]);
    })

    form.addEventListener("freeform-stripe-styling", function (event) {
      event.detail.base = {
        fontSize: "14px",
        fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
      }
    })
  }
</script>

<style>
    .StripeElement {
        padding: 8px 12px;
    }
</style>


{% if form.pages|length > 1 %}
    <ul class="nav nav-tabs">
    {% for page in form.pages %}
        <li class="nav-item">
            <span class="nav-link{{ form.currentPage.index == page.index ? ' font-weight-bold active' : ' disabled' }}">{{ page.label }}</span>
        </li>
    {% endfor %}
    </ul>
{% endif %}

{% if form.hasErrors %}
    <div class="alert alert-danger">
        {{ form.errorMessage | t('freeform') }}

        {% if form.errors|length %}
            <ul>
                {% for error in form.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}

{% for row in form %}
    <div class="row {{ form.customAttributes.rowClass }}">
        {% for field in row %}
            {% set width = (12 / (row|length)) %}

            {% set isCheckbox = field.type in ["checkbox","mailing_list"] %}

            {% set columnClass = isCheckbox ? "checkbox" : "form-group" %}
            {% set columnClass = field.type == "file" ? "" : columnClass %}
            {% set columnClass = columnClass ~ (field.errors|length ? " has-error" : "") %}
            {% set columnClass = columnClass ~ form.customAttributes.columnClass %}
            {% set columnClass = columnClass ~ " col-sm-" ~ width ~ " col-xs-12" %}

            {% if field.type == "submit" or field.type == "save" %}
                {% set columnClass = columnClass ~ " submit-align-" ~ field.position %}
            {% endif %}

            <div class="{{ columnClass }} ff-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>

                {% if field.type == "checkbox_group" %}

                    {{ field.renderLabel({
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        errorClass: "help-block",
                    }) }}

                    {% if field.oneLine %}
                        <div>
                            {% for option in field.options %}
                                <label class="checkbox-inline">
                                    <input type="checkbox"
                                           name="{{ field.handle }}[]"
                                           value="{{ option.value }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            {% endfor %}
                        </div>
                    {% else %}
                        {% for option in field.options %}
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"
                                           name="{{ field.handle }}[]"
                                           value="{{ option.value }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            </div>
                        {% endfor %}
                    {% endif %}

                    {{ field.renderInstructions() }}
                    {{ field.renderErrors() }}

                {% elseif field.type == "radio_group" %}

                    {{ field.renderLabel({
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        errorClass: "help-block",
                    }) }}

                    {% if field.oneLine %}
                        <div>
                            {% for option in field.options %}
                                <label class="radio-inline">
                                    <input type="radio"
                                           name="{{ field.handle }}"
                                           value="{{ option.value }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            {% endfor %}
                        </div>
                    {% else %}
                        {% for option in field.options %}
                            <div class="radio">
                                <label>
                                    <input type="radio"
                                           name="{{ field.handle }}"
                                           value="{{ option.value }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            </div>
                        {% endfor %}
                    {% endif %}

                    {{ field.renderInstructions() }}
                    {{ field.renderErrors() }}

                {% elseif field.type == "dynamic_recipients" and (field.showAsRadio or field.showAsCheckboxes) %}

                    {{ field.renderLabel({
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        errorClass: "help-block",
                    }) }}

                    {% if field.oneLine %}
                        <div>
                            {% for option in field.options %}
                                <label class="{{ field.showAsRadio ? "radio" : "checkbox" }}-inline">
                                    <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                                           name="{{ field.handle }}[]"
                                           value="{{ loop.index0 }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            {% endfor %}
                        </div>
                    {% else %}
                        {% for option in field.options %}
                            <div class="{{ field.showAsRadio ? "radio" : "checkbox" }}">
                                <label>
                                    <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                                           name="{{ field.handle }}[]"
                                           value="{{ loop.index0 }}"
                                            {{ option.checked ? "checked" : "" }}
                                    />
                                    {{ option.label|t('freeform')|raw }}
                                </label>
                            </div>
                        {% endfor %}
                    {% endif %}

                    {{ field.renderInstructions() }}
                    {{ field.renderErrors() }}

                {% elseif field.type == "signature" %}

                    {{ field.render({ class: "btn btn-light" }) }}

                {% elseif field.type == "table" %}

                    {{ field.render({
                        class: "table",
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        errorClass: "help-block",
                        instructionsBelowField: true,
                        addButtonLabel: "Add +",
                        addButtonClass: "btn btn-sm btn-primary",
                        removeButtonLabel: "x",
                        removeButtonClass: "btn btn-sm btn-danger",
                        tableTextInputClass: "form-control",
                        tableSelectInputClass: "form-control",
                        tableCheckboxInputClass: "form-check-input"
                    }) }}

                {% elseif field.type == "submit" or field.type == "save" %}

                    {{ field.render({ class: "btn btn-primary" }) }}

                {% elseif field.type == "cc_details" %}

                    {# FOR FREEFORM PAYMENTS #}

                    {{ field.renderLabel({
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        errorClass: "help-block",
                    }) }}

                    {% for layoutRow in field.layoutRows %}
                        <div class="row {{ form.customAttributes.rowClass }}">
                            {% for layoutField in layoutRow %}
                                {% set layoutWidth = (12 / (layoutRow|length)) %}
                                {% set columnClass = columnClass|replace(' col-sm-' ~ width) %}
                                {% set columnClass = columnClass ~ " col-sm-" ~ layoutWidth %}
                                <div class="{{ columnClass }}">
                                    {{ layoutField.render({
                                        class: isCheckbox ? "checkbox" : "form-control",
                                        instructionsClass: "help-block",
                                        instructionsBelowField: true,
                                        labelClass: (layoutField.required ? " required" : ""),
                                        errorClass: "help-block",
                                    }) }}
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}

                    {{ field.renderInput({
                        instructionsClass: "help-block",
                        instructionsBelowField: true,
                        labelClass: (field.required ? " required" : ""),
                        errorClass: "help-block",
                    }) }}

                    {{ field.renderInstructions }}
                    {{ field.renderErrors }}

                {% else %}

                    {{ field.render({
                        class: isCheckbox ? "checkbox" : "form-control",
                        instructionsClass: "help-block",
                        instructionsBelowField: true,
                        labelClass: (field.required ? " required" : ""),
                        errorClass: "help-block",
                    }) }}

                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endfor %}

{{ form.renderClosingTag }}