{% if not is_multiform %}
    <div id="ts-forms-matrix-{{ field.fieldid }}" class="form-group field-{{field.fieldid}} {{ field.getAttributesJsonDecoded()['parentCss'] }}">
        {% if field.getAttributesJsonDecoded()['headline'] is not empty %}
            <{{ field.getAttributesJsonDecoded()['headlineType'] }} class="w-100 {{ field.getAttributesJsonDecoded()['headlineCss'] }}
            {% if field.getAttributesJsonDecoded()['headlinePosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['headlinePosition'] == "right"%}text-right{% else %}text-left{% endif %}
            ">{{ field.getAttributesJsonDecoded()['headline'] }}
            </{{ field.getAttributesJsonDecoded()['headlineType'] }}>
        {% endif %}
        <table class="table {{ field.getAttributesJsonDecoded()['tableCss'] }}
        {% if field.getAttributesJsonDecoded()['striped'] %}table-striped {% endif %}
        {% if field.getAttributesJsonDecoded()['border'] %}table-bordered {% endif %}
        {% if field.getAttributesJsonDecoded()['hover'] %}table-hover {% endif %}
        {% if field.getAttributesJsonDecoded()['small'] %}table-sm {% endif %}
        ">
            <thead>
                <tr {% if field.getAttributesJsonDecoded()['headingsPositionRotate'] %}style="height: {{ field.getAttributesJsonDecoded()['headingsHeight'] }}px"{% endif %}  class="d-flex">
                    <th class="col-{{ 12 - field.getAttributesJsonDecoded()['selectCount'] }} {{ field.getAttributesJsonDecoded()['questionHeadlineCss'] }} 
                                {% if field.getAttributesJsonDecoded()['headingsPositionVertical'] == "top" %}d-flex align-items-start{% elseif field.getAttributesJsonDecoded()['headingsPositionVertical'] == "middle"%}d-flex align-items-center{% else %}d-flex align-items-end{% endif %}"
                                scope="col">{{ field.getAttributesJsonDecoded()['questionHeadline'] }}</th>
                    {% for heading in field.getAttributesJsonDecoded()['headings'] %}
                        <th class="col-1 {% if field.getAttributesJsonDecoded()['headingsPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['headingsPosition'] == "right"%}text-right{% else %}text-left{% endif %}
                                            {% if field.getAttributesJsonDecoded()['headingsPositionVertical'] == "top" %}d-flex align-items-start{% elseif field.getAttributesJsonDecoded()['headingsPositionVertical'] == "middle"%}d-flex align-items-center{% else %}d-flex align-items-end{% endif %}
                                            {{ field.getAttributesJsonDecoded()['headingsCssParent'] }} " scope="col">
                                <{{ field.getAttributesJsonDecoded()['headingsType'] }} class="w-100 m-auto {{ field.getAttributesJsonDecoded()['headingsCss'] }} {% if field.getAttributesJsonDecoded()['headingsPositionRotate'] %}table-cell-rotate{% endif %}">
                                    {{ heading['text'] }}
                                </{{ field.getAttributesJsonDecoded()['headingsType'] }}>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for key, el in field.getAttributesJsonDecoded()['questions'] %}
                    <tr class="d-flex" data-row="{{ (key+1) }}">
                        <td class="col-{{ 12 - field.getAttributesJsonDecoded()['selectCount'] }} align-middle {% if field.getAttributesJsonDecoded()['questionPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['questionPosition'] == "right"%}text-right{% else %}text-left{% endif %} {{ field.getAttributesJsonDecoded()['questionCssParent'] }}">
                            <{{ field.getAttributesJsonDecoded()['questionType'] }} class="m-0 {{ field.getAttributesJsonDecoded()['questionCss'] }}
                                    ">{{ el['question'] }}
                                    {% if field.getAttributesJsonDecoded()['required'] %}
                                        <div class="help-block text-danger d-none mt-2">Eine Option muss gewählt werden.</div>
                                    {% endif %}
                            </{{ field.getAttributesJsonDecoded()['questionType'] }}>
                        </td>
                        {% for heading in field.getAttributesJsonDecoded()['headings'] %}
                            <td class="d-flex align-items-center justify-content-center col-1 {{ field.getAttributesJsonDecoded()['answerCssParent'] }}">
                                <input type="radio" class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} m-0 p-0 {{ field.getAttributesJsonDecoded()['answerCss'] }}"
                                        name="tsform-field-{{ field.fieldid }}-{{ key }}" 
                                        id="tsform-field-{{ field.fieldid }}-{{ key }}-{{ loop.index0 }}" 
                                        value="{{ heading['value'] }}"
                                        data-fieldid="{{ field.fieldid }}"
                                        data-matrix="true"
                                        data-optionid="{{ key }}"
                                        {% if field.getAttributesJsonDecoded()['required'] %}
                                            required
                                        {% endif %}
                                        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                                            disabled
                                        {% endif %}
                                        {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] == heading['value'] and not keepdata %}
                                            checked
                                        {% endif %}
                                        >
                            </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
            </tbody>
            {% if field.getAttributesJsonDecoded()['headingsPositionRepeatBottom'] %}
            <tfoot>
                <tr {% if field.getAttributesJsonDecoded()['headingsPositionRotate'] %}style="height: {{ field.getAttributesJsonDecoded()['headingsHeight'] }}px"{% endif %}  class="d-flex">
                    <th class="col-{{ 12 - field.getAttributesJsonDecoded()['selectCount'] }} {{ field.getAttributesJsonDecoded()['questionHeadlineCss'] }} 
                                {% if field.getAttributesJsonDecoded()['headingsPositionVertical'] == "top" %}d-flex align-items-start{% elseif field.getAttributesJsonDecoded()['headingsPositionVertical'] == "middle"%}d-flex align-items-center{% else %}d-flex align-items-end{% endif %}"
                                scope="col">{{ field.getAttributesJsonDecoded()['questionHeadline'] }}</th>
                    {% for heading in field.getAttributesJsonDecoded()['headings'] %}
                        <th class="col-1 {% if field.getAttributesJsonDecoded()['headingsPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['headingsPosition'] == "right"%}text-right{% else %}text-left{% endif %}
                                            {% if field.getAttributesJsonDecoded()['headingsPositionVertical'] == "top" %}d-flex align-items-start{% elseif field.getAttributesJsonDecoded()['headingsPositionVertical'] == "middle"%}d-flex align-items-center{% else %}d-flex align-items-end{% endif %}
                                            {{ field.getAttributesJsonDecoded()['headingsCssParent'] }} " scope="col">
                                <{{ field.getAttributesJsonDecoded()['headingsType'] }} class="{{ field.getAttributesJsonDecoded()['headingsCss'] }} {% if field.getAttributesJsonDecoded()['headingsPositionRotate'] %}table-cell-rotate{% endif %}">
                                    {{ heading['text'] }}
                                </{{ field.getAttributesJsonDecoded()['headingsType'] }}>
                        </th>
                    {% endfor %}
                </tr>
            </tfoot>
            {% endif %}
        </table>
        {% if saveOnceDisable %} 
            <span class="help-block text-muted">Sie haben dieses Formular am {{ saveOnceDate|date("d.m.Y") }} um {{ saveOnceDate|date("H:i") }} Uhr bereits gespeichert.</span>
        {% endif %}
    </div>
{% else %}
    <div class="alert alert-danger" role="alert">
        <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
        <p>
            Der Formularfeld-Typ Matrix ist nicht für die Verwendung mit MultiForms vorgesehen!<br>
            Deaktivieren Sie die Option MultiForm für das Formular #{{ formid }} in den Einstellungen im WordPress Backend.
        </p>
    </div>
{% endif %}

{% if field.getAttributesJsonDecoded()['headingsPositionRotateOnMobile'] %}
<style>
@media (max-width: 768px) {
     .ts-forms-formwrapper .field-{{field.fieldid}} th * {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        width: 100%;
        height: 100%;
        line-height: 1;
        display: flex;
        text-align: left;
        align-items: center;
    }
     .ts-forms-formwrapper .field-{{field.fieldid}} tr {
        height: {{ field.getAttributesJsonDecoded()['headingsHeight'] }}px;
    }
}
</style>
{% endif %}
