{% css formCss %}
<style>
input,
textarea,
select {
    margin-bottom: 0 !important;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    margin: 0;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
    margin: 0 15px 0 3px;
}
.ff-fieldtype-rating input[type="radio"] + label {
    margin: 0 3px 0 0;
}
label.required:after {
    content: "*";
    margin-left: 3px;
    color: red;
}
.freeform-page-tabs {
    border-bottom: 1px solid gray;
}
.freeform-page-tabs li {
    font-weight: normal !important;
    color: gray !important;
}
.freeform-page-tabs li.is-active {
    font-weight: bold !important;
    color: black !important;
    border: 1px solid gray;
    border-bottom: none;
    background: lightgray;
}
.grid-margin-x {
    padding: 7px 0;
}
.errors {
    color: red;
    margin-bottom: 0 !important;
}
.help-text {
    color: gray;
    margin-top: 0;
}
.has-error {
    border-color: red;
}
</style>

{{ 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", ["callout", "alert", "form-errors"]);
      freeform.setOption("errorClassList", ["errors"]);
      freeform.setOption("errorClassField", "has-error");
      freeform.setOption("successClassBanner", ["callout", "success"]);
    })

    form.addEventListener("freeform-stripe-styling", function (event) {
      event.detail.base = {
        fontSize: "16px",
        fontFamily: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
      }
    })
  }
</script>

{% if form.pages|length > 1 %}
    <ul class="menu freeform-page-tabs">
        {% for page in form.pages %}
            <li class="menu-text{{ form.currentPage.index == page.index ? ' is-active' : '' }}">
                {{ page.label }}
            </li>
        {% endfor %}
    </ul>
    <br />
{% endif %}

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

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

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

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

            {% set columnClass = "" %}
            {% set columnClass = columnClass ~ form.customAttributes.columnClass %}
            {% set columnClass = columnClass ~ " medium-" ~ width %}

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

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

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

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

                    {% for index, option in field.options %}
                        {{ not field.oneLine ? '<div class="checkbox">'|raw }}

                        <input type="checkbox"
                               name="{{ field.handle }}[]"
                               value="{{ option.value }}"
                               id="{{ field.idAttribute }}-{{ index }}"
                                {{ option.checked ? "checked" : "" }}
                        />
                        <label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t('freeform')|raw }}</label>

                        {{ not field.oneLine ? '</div>'|raw }}
                    {% endfor %}

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

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

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

                    {% for index, option in field.options %}
                        {{ not field.oneLine ? '<div class="radio">'|raw }}

                        <input type="radio"
                               name="{{ field.handle }}"
                               value="{{ option.value }}"
                               id="{{ field.idAttribute }}-{{ index }}"
                                {{ option.checked ? "checked" : "" }}
                        />
                        <label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t('freeform')|raw }}</label>

                        {{ not field.oneLine ? '</div>'|raw }}
                    {% endfor %}

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

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

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

                    {% for index, option in field.options %}
                        {{ not field.oneLine ? '<div class="radio">'|raw }}

                        <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                               name="{{ field.handle }}[]"
                               value="{{ loop.index0 }}"
                               id="{{ field.idAttribute }}-{{ index }}"
                                {{ option.checked ? "checked" : "" }}
                        />
                        <label for="{{ field.idAttribute }}-{{ index }}">{{ option.label|t('freeform')|raw }}</label>

                        {{ not field.oneLine ? '</div>'|raw }}
                    {% endfor %}

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

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

                    {# FOR FREEFORM PAYMENTS #}

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

                    {% for layoutRow in field.layoutRows %}
                        <div class="grid-x grid-margin-x {{ form.customAttributes.rowClass }}">
                            {% set layoutWidth = (12 / (layoutRow|length)) %}
                            {% set columnClass = columnClass|replace('medium-3')|replace('medium-4')|replace('medium-6')|replace('medium-12') %}
                            {% set columnClass = columnClass ~ " medium-" ~ layoutWidth %}
                            {% for layoutField in layoutRow %}
                                <div class="{{ columnClass }} cell">
                                    {{ layoutField.renderLabel({
                                        labelClass: (layoutField.required ? " required" : ""),
                                        instructionsClass: "help-text",
                                    }) }}

                                    {{ layoutField.renderInput({
                                        instructionsClass: "help-block",
                                        instructionsBelowField: true,
                                        labelClass: (layoutField.required ? " required" : ""),
                                        errorClass: "help-block",
                                        inputAttributes: {type: "text"},
                                    }) }}

                                    {{ layoutField.renderInstructions() }}
                                    {{ layoutField.renderErrors() }}
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}

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

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

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

                    {{ field.render({ class: "button" }) }}

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

                    {{ field.render({
                        class: "table",
                        labelClass: (field.required ? " required" : ""),
                        instructionsClass: "help-block",
                        instructionsBelowField: true,
                        errorClass: "help-block",
                        addButtonLabel: "Add +",
                        addButtonClass: "button",
                        removeButtonLabel: "x",
                        removeButtonClass: "button",
                        tableTextInputClass: "",
                        tableSelectInputClass: "",
                        tableCheckboxInputClass: ""
                    }) }}

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

                    {{ field.render({ class: "button" }) }}

                {% else %}

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

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

{{ form.renderClosingTag }}