{% set value = submission[field.handle] is not null ? 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" 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 }}
                                        </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") }}"
                            />
                        {% case "file" %}
                            {% set metadata = column.metadata|default({}) %}
                            {% set fileCount = metadata.fileCount|default(1) %}
                            {% set fileInputName = colName %}
                            {% if fileCount > 1 %}
                                {% set fileInputName = colName ~ "[]" %}
                            {% endif %}
                            <input type="file" name="{{ fileInputName }}"{% if fileCount > 1 %} multiple{% endif %} />
                        {% default %}
                            <textarea name="{{ colName }}"
                                      data-default-value="{{ column.value|default("") }}"
                                      rows="{{ colType == 'textarea' ? 4 : 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" }}
                                />
                            {% case "file" %}
                                {% set metadata = column.metadata|default({}) %}
                                {% set fileCount = metadata.fileCount|default(1) %}
                                {% set fileInputName = colName %}
                                {% if fileCount > 1 %}
                                    {% set fileInputName = colName ~ "[]" %}
                                {% endif %}

                                {% set assetIds = [] %}
                                {% if colValue is iterable %}
                                    {% set assetIds = colValue %}
                                {% elseif colValue %}
                                    {% set assetIds = [colValue] %}
                                {% endif %}

                                {% if assetIds is not empty %}
                                    <div class="file-preview elements chips chips-small">
                                        {% for assetId in assetIds %}
                                            {% set asset = craft.app.assets.getAssetById(assetId) %}
                                            {% if asset %}
                                                {% set thumbSizes = [30, 60, 100, 200] %}
                                                {% set srcset = "" %}
                                                {%- if asset.kind == 'image' -%}
                                                    {%- for size in thumbSizes -%}
                                                        {% set thumbTransform = { width: size, height: size } %}
                                                        {% set srcset = srcset ~ ", " ~ asset.getUrl(thumbTransform) ~ " " ~ size ~ "w" %}
                                                    {%- endfor -%}
                                                    {% set srcset = srcset|trim(", ") %}
                                                {%- else -%}
                                                    {% set srcset = craft.app.assets.thumbUrl(asset, 200, 200) %}
                                                {%- endif -%}

                                                <div class="element small removable hasthumb chip" style="padding-right: 20px;">
                                                    <input type="hidden" name="{{ fileInputName }}"
                                                           value="{{ asset.id }}">
                                                    <a href="javascript:;" onclick="removeAsset(this);" class="icon delete"></a>
                                                    <div class="elementthumb thumb">
                                                        <img sizes="30px" srcset="{{ srcset }}" alt="">
                                                    </div>
                                                    <label class="chip-content">
                                                        <a href="javascript:;" data-asset-id="{{ asset.id }}">
                                                            {{ asset.title }}
                                                        </a>
                                                    </label>
                                                </div>
                                            {% elseif assetId %}
                                                <span class="chip">
                                                    {{ "Missing asset #{id}"|t('freeform', { id: assetId }) }}
                                                </span>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                {% endif %}

                                <input type="file" name="{{ fileInputName }}"{% if fileCount > 1 %} multiple{% endif %} />
                            {% 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>