{%- set static = static ?? false %}
{%- set cols = cols ?? [] %}
{%- set rows = rows ?? [] %}
{%- set initJs = not static and (initJs ?? true) -%}
{%- set minRows = minRows ?? null %}
{%- set maxRows = maxRows ?? null %}
{%- set staticRows = static or (staticRows ?? false) or (minRows == 1 and maxRows == 1 and rows|length == 1) %}
{%- set fixedRows = not staticRows and (minRows and minRows == maxRows and minRows == rows|length) %}

{% if not static %}
    <input type="hidden" name="{{ name }}" value="">
{% endif %}

<table id="{{ id }}" class="shadow-box editable"
       {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    <thead>
        <tr>
            {% for col in cols %}
                {%- switch col.type %}
                    {%- case 'time' %}
                        {%- do view.registerAssetBundle('craft\\web\\assets\\timepicker\\TimepickerAsset') %}
                    {%- case 'template' %}
                        {%- do view.registerAssetBundle("craft\\web\\assets\\vue\\VueAsset") %}
                {%- endswitch %}
                <th scope="col" class="{{ col.class ?? '' }}">
                    {%- if col.heading is defined and col.heading %}{{ col.heading }}{% else %}&nbsp;{% endif %}
                    {%- if col.info is defined -%}
                        <span class="info">{{ col.info|md|raw }}</span>
                    {%- endif -%}
                </th>
            {% endfor %}
            {% if not staticRows %}
                <th colspan="{{ fixedRows ? 1 : 2 }}"></th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
        {% for rowId, row in rows %}
            <tr data-id="{{ rowId }}">
                {% for colId, col in cols %}
                    {% set cell = row[colId] ?? null %}
                    {% set value = cell.value is defined ? cell.value : cell %}
                    {% if col.type == 'heading' %}
                        <th scope="row" class="{{ cell.class ?? col.class ?? '' }}">{{ value|raw }}</th>
                    {% elseif col.type == 'html' %}
                        <td class="{{ cell.class ?? col.class ?? '' }}">{{ value|raw }}</td>
                    {% else %}
                        {% set hasErrors = cell.hasErrors ?? false %}
                        {% set cellName = name~'['~rowId~']['~colId~']' %}
                        {% set textual = (col.type in ['color', 'date', 'multiline', 'number', 'singleline', 'template', 'time']) %}
                        {% set isCode = col.code is defined or col.type == 'color' %}
                        <td class="{% if textual %}textual{% endif %} {% if col.class is defined %}{{ col.class }}{% endif %} {% if isCode %}code{% endif %} {% if hasErrors %}error{% endif %}"{% if col.width is defined %} width="{{ col.width }}"{% endif %}>
                            {%- switch col.type -%}
                                {%- case 'checkbox' -%}
                                    {% include "_includes/forms/checkbox" with {
                                        name: cellName,
                                        value:  col.value ?? 1,
                                        checked: value is not empty,
                                        disabled: static
                                    } only %}
                                {%- case 'color' -%}
                                    {% include "_includes/forms/color" with {
                                        name: cellName,
                                        value: value,
                                        small: true,
                                        disabled: static
                                    } only %}
                                {%- case 'date' -%}
                                    {% include "_includes/forms/date" with {
                                        name: cellName,
                                        value: value,
                                        disabled: static
                                    } only %}
                                {%- case 'lightswitch' -%}
                                    {% include "_includes/forms/lightswitch" with {
                                        name: cellName,
                                        on: value,
                                        value: col.value ?? 1,
                                        small: true,
                                        disabled: static
                                    } only %}
                                {% case 'select' -%}
                                    {% include "_includes/forms/select" with {
                                        class: 'small',
                                        name: cellName,
                                        options: cell.options ?? col.options,
                                        value: value,
                                        disabled: static
                                    } only %}
                                {%- case 'time' -%}
                                    {% include "_includes/forms/time" with {
                                        name: cellName,
                                        value: value,
                                        disabled: static
                                    } only %}
                                {%- case 'template' -%}
                                    {% include "_includes/forms/autosuggest" with {
                                        name: cellName,
                                        suggestions: craft.cp.getTemplateSuggestions(),
                                        value: value,
                                        disabled: static
                                    } only %}
                                {%- default -%}
                                    <textarea name="{{ cellName }}" rows="1"{% if static %} disabled{% endif %}{% if col.placeholder is defined %} placeholder="{{ col.placeholder }}"{% endif %}>{{ value }}</textarea>
                            {%- endswitch -%}
                        </td>
                    {% endif %}
                {% endfor %}
                {% if not staticRows %}
                    <td class="thin action"><a class="move icon" title="{{ 'Reorder'|t('app') }}"></a></td>
                    {% if not fixedRows %}<td class="thin action"><a class="delete icon" title="{{ 'Delete'|t('app') }}"></a></td>{% endif %}
                {% endif %}
            </tr>
        {% endfor %}
    </tbody>
</table>
{% if not staticRows and not fixedRows %}
    <div class="btn add icon">{{ addRowLabel is defined ? addRowLabel : "Add a row"|t('app') }}</div>
{% endif %}

{% if initJs %}
    {% set jsId = id|namespaceInputId|e('js') %}
    {% set jsName = name|namespaceInputName|e('js') %}
    {% set jsCols = cols|json_encode %}
    {% set defaultValues = defaultValues ?? null %}
    {% js %}
        new Craft.EditableTable("{{ jsId }}", "{{ jsName }}", {{ jsCols|raw }}, {
            defaultValues: {{ defaultValues ? defaultValues|json_encode|raw : '{}' }},
            staticRows: {{ staticRows ? 'true' : 'false' }},
            minRows: {{ minRows ? minRows : 'null' }},
            maxRows: {{ maxRows ? maxRows : 'null' }}
        });
    {% endjs %}
{% endif %}