{% trans_default_domain 'contao_default' %}

{% set table_attributes = attrs()
    .set('id', 'ctrl_' ~ id)
    .set('data-controller', 'contao--row-wizard')
    .set('data-contao--row-wizard-name-value', id)
    .addClass('tl_sectionwizard')
%}
<table{{ table_attributes }}>
    <thead>
        <tr>
            <th></th>
            <th>{{ 'MSC.sw_title'|trans }}</th>
            <th>{{ 'MSC.sw_id'|trans }}</th>
            <th>{{ 'MSC.sw_template'|trans }}</th>
            <th>{{ 'MSC.sw_position'|trans }}</th>
            <th></th>
        </tr>
    </thead>
    <tbody class="sortable" data-controller="contao--sortable" data-contao--sortable-handle-value=".drag-handle" data-action="contao--sortable:update->contao--row-wizard#updateSorting" data-contao--row-wizard-target="body">
        {% for row in rows %}
            <tr data-contao--row-wizard-target="row">
                <td>
                    {# Drag row #}
                    {% set drag_handle_attributes = attrs()
                        .set('type', 'button')
                        .set('data-action', 'keydown->contao--sortable#move')
                        .addClass('drag-handle')
                    %}
                    <button{{ drag_handle_attributes }}>{{ backend_icon('drag.svg', 'MSC.move'|trans) }}</button>
                </td>

                {# Title #}
                <td>
                    {% set title_input_attributes = attrs()
                        .set('type', 'text')
                        .set('name', "#{id}[#{loop.index0}][title]")
                        .set('id', "#{id}_title_#{loop.index0}")
                        .set('value', row.title)
                        .addClass('tl_text')
                    %}
                    <input{{ title_input_attributes }}>
                </td>

                {# ID #}
                <td>
                    {% set id_input_attributes = attrs()
                        .set('type', 'text')
                        .set('name', "#{id}[#{loop.index0}][id]")
                        .set('id', "#{id}_id_#{loop.index0}")
                        .set('value', row.id)
                        .addClass('tl_text')
                    %}
                    <input{{ id_input_attributes }}>
                </td>

                {# Template #}
                <td>
                    {% set template_select_attributes = attrs()
                        .set('name', "#{id}[#{loop.index0}][template]")
                        .set('data-action', 'focus->contao--scroll-offset#store')
                        .addClass('tl_select')
                    %}
                    <select{{ template_select_attributes }}>
                        {% for option in row.template_options %}
                            {% set option_attributes = attrs()
                                .set('value', option.value)
                                .set('selected', 'selected', option.selected)
                            %}
                            <option{{ option_attributes }}>{{ option.label }}</option>
                        {% endfor %}
                    </select>
                </td>

                {# Position #}
                <td>
                    {% set position_select_attributes = attrs()
                        .set('name', "#{id}[#{loop.index0}][position]")
                        .set('data-action', 'focus->contao--scroll-offset#store')
                        .addClass('tl_select')
                    %}
                    <select{{ position_select_attributes }}>
                        {% for option in row.position_options %}
                            {% set option_attributes = attrs()
                                .set('value', option.value)
                                .set('selected', 'selected', option.selected)
                            %}
                            <option{{ option_attributes }}>{{ option.label }}</option>
                        {% endfor %}
                    </select>
                </td>

                {# Controls #}
                <td class="tl_right">
                    {# Copy row #}
                    {% set copy_button_attributes = attrs()
                        .set('type', 'button')
                        .set('data-action', 'contao--row-wizard#copy contao--scroll-offset#store')
                    %}
                    <button{{ copy_button_attributes }}>{{ backend_icon('copy.svg', 'MSC.mw_copy'|trans) }}</button>

                    {# Delete row #}
                    {% set delete_button_attributes = attrs()
                        .set('type', 'button')
                        .set('data-action', 'contao--row-wizard#delete contao--scroll-offset#store')
                    %}
                    <button{{ delete_button_attributes }}>{{ backend_icon('delete.svg', 'MSC.mw_delete'|trans) }}</button>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
