{% set value = submission[field.handle].value %}

<div class="field" data-freeform-table>
    <div class="heading">
        <label>{{ field.label }}</label>
    </div>
    <table class="shadow-box editable fullwidth">
        <thead>
        <tr>
            {% for column in field.tableLayout %}
                <th>
                    {{ column.label|default('') }}
                </th>
            {% endfor %}
            <th></th>
        </tr>
        </thead>
        <tbody>
        {% if value is empty %}
            <tr>
                {% for index, column in field.tableLayout %}
                    {% set colName = field.handle ~ "[0][" ~ index ~ "]" %}
                    {% set colType = column.type|default("text") %}
                    {% set colClass = "" %}
                    {% if colType == "text" %}
                        {% set colClass = "textual" %}
                    {% elseif colType == "select" %}
                        {% set colClass = "thin" %}
                    {% endif %}
                    <td class="{{ colClass }}">
                        {% switch colType %}
                        {% case "select" %}
                            <div class="select small">
                                <select name="{{ colName }}"
                                        data-default-value="{{ column.value|default("") }}"
                                >
                                    {% for option in column.options %}
                                        <option value="{{ option }}">
                                            {{ option }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% case "radio" %}
                            <div>
                                {% for option in column.options %}
                                    <div>
                                        <input type="radio" name="{{ colName }}"
                                               value="{{ option }}" {{ column.value == option ? 'checked="checked"' }} />
                                        <label>{{ option }}</label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% case "checkbox" %}
                            <input type="checkbox"
                                   data-default-value="{{ column.value|default("Yes") }}"
                                   name="{{ colName }}"
                                   value="{{ column.value|default("Yes") }}"
                            />
                        {% default %}
                            <textarea name="{{ colName }}"
                                      data-default-value="{{ column.value|default("") }}"
                                      rows="1"
                            >
                                                                        {{- column.value|default("") -}}
                                                                    </textarea>
                        {% endswitch %}
                    </td>
                {% endfor %}
                <td class="thin action">
                    <a class="delete icon"
                       data-freeform-table-remove-row
                       title="Delete"></a>
                </td>
            </tr>
        {% else %}
            {% for rowIndex, row in value %}
                <tr>
                    {% for index, column in field.tableLayout %}
                        {% set colName = field.handle ~ "[" ~ rowIndex ~ "][" ~ index ~ "]" %}
                        {% set colValue = row[index]|default("") %}
                        {% set colType = column.type|default("text") %}
                        {% set colClass = "" %}
                        {% if colType == "text" or colType == "textarea" %}
                            {% set colClass = "textual" %}
                        {% elseif colType == "select" %}
                            {% set colClass = "thin" %}
                        {% endif %}
                        <td class="{{ colClass }}">
                            {% switch colType %}
                            {% case "select" %}
                                <div class="select small">
                                    <select name="{{ colName }}"
                                            data-default-value="{{ column.value|default("") }}"
                                    >
                                        {% for option in column.options %}
                                            <option value="{{ option }}"{{ option == colValue ? " selected" }}>
                                                {{ option }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% case "radio" %}
                                <div>
                                    {% for option in column.options %}
                                        <div>
                                            <input type="radio" name="{{ colName }}"
                                                   value="{{ option }}" {{ colValue == option ? 'checked="checked"' }} />
                                            <label>{{ option }}</label>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% case "checkbox" %}
                                <input type="checkbox"
                                       name="{{ colName }}"
                                       data-default-value="{{ column.value|default("Yes") }}"
                                       value="{{ column.value|default("Yes") }}"
                                        {{ colValue ? "checked" }}
                                />
                            {% default %}
                                <textarea name="{{ colName }}"
                                          data-default-value="{{ column.value|default("") }}"
                                          rows="{{ colType == 'textarea' ? 4 : 1 }}"
                                >
                                    {{- colValue -}}
                                </textarea>
                            {% endswitch %}
                        </td>
                    {% endfor %}
                    <td class="thin action">
                        <a class="delete icon"
                           data-freeform-table-remove-row
                           title="Delete"></a>
                    </td>
                </tr>
            {% endfor %}
        {% endif %}
        </tbody>
    </table>
    <div class="btn add icon"
         data-freeform-table-add-row
         tabindex="0">
        {{ "Add a row"|t('freeform') }}
    </div>
</div>