<%
    const notConfiguredText =
        (typeof Craft !== 'undefined' && Craft.t)
            ? Craft.t('freeform', 'Table field has not been configured yet.')
            : 'Table field has not been configured yet.';

    const sampleText =
        (typeof Craft !== 'undefined' && Craft.t)
            ? Craft.t('freeform', 'Sample data')
            : 'Sample data';
%>

<% if (!tableLayout.length) { %>
    <%= notConfiguredText %>
<% } %>

<table class="table-cell-preview data fullwidth columns-<%= tableLayout.length %>">
    <thead>
        <tr>
            <% tableLayout.forEach(function(column) { %>
                <th class="<%= column.required ? 'required' : '' %>"><%= column.label %></th>
            <% }); %>
        </tr>
    </thead>
    <tbody>
        <% for (var i = 1; i <= 3; i++ ) { %>
            <tr>
                <% tableLayout.forEach(function(column) { %>
                    <td class="text-cell <%= column.type %>-cell">
                        <% if (column.type === 'select') { %>
                            <div class="small select">
                                <select>
                                    <% column.options.forEach(function(option) { %>
                                        <option <%= column.value == option ? 'selected' : '' %>><%= option %></option>
                                    <% }); %>
                                </select>
                            </div>
                        <% } else if (column.type === 'checkbox') { %>
                            <div class="checkbox-label">
                                <input
                                        type="checkbox"
                                        class="checkbox"<%= !!column.checked ? 'checked="checked"' : '' %>
                                />
                                <label for=""></label>
                            </div>
                        <% } else if (column.type === 'radio') { %>
                            <div>
                                <% column.options.forEach(function(option) { %>
                                    <div>
                                        <input
                                                type="radio"
                                                name="<%= column.name %>"
                                                <%= column.value == option ? 'checked="checked"' : '' %>
                                        />
                                        <label><%= option %></label>
                                    </div>
                                <% }); %>
                            </div>
                        <% } else if (column.type === 'textarea') { %>
                            <textarea placeholder="<%= column.placeholder %>"><% if (column.value.length > 0) { %><%= column.value %><% } else { %><%= sampleText %><% } %></textarea>
                        <% } else { %>
                            <input
                                    type="text"
                                    value="<% if (column.value.length > 0) { %><%= column.value %><% } else { %><%= sampleText %><% } %>"
                                    placeholder="<%= column.placeholder %>"
                            />
                        <% } %>
                    </td>
                <% }); %>
            </tr>
        <% } %>
    </tbody>
</table>
