{% if formfield.countSubmissions > 0 %}
    <div class="alert alert-info " role="alert">
        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
            Da Nutzende bereits Eingaben in dieser Matrix getätigt haben, können Sie keine Fragen löschen oder hinzufügen.<br>
            Sie haben die Möglichkeit dieses Formular zu duplizieren und das Formularfeld im Duplikat zu bearbeiten oder die Nutzereingaben mit einem Klick auf den <button class="btn btn-danger btn-inline btn-sm" type="button"><i class="fas fa-user-times"></i></button>-Button zu entfernen. Gegebenenfalls sollten Sie die Eingaben davor mittels Datenexport exportieren.
        </p>
    </div>
{% endif %}
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="matrixHeadline">Titel:</label>
    <input type="text" class="form-control newFormFieldInput" id="matrixHeadline" placeholder="Titel"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headline'] }}{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="matrixSelectcount">Anzahl der Auswahlfelder:</label>
    <input type="number" class="form-control newFormFieldInput mb-2" id="matrixSelectcount" placeholder="Anzahl" min="2" max="11"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['selectCount'] }}{% else %}2{% endif %}">
    <span class="help-text text-danger d-none">Bitte geben Sie einen Wert zwischen 2 und 11 ein.</span>
</div>
<label class="mb-2 mx-0 mt-0">Überschriften:</label>
<div class="clearfix">
    <div class="card card-body p-0 m-0 border-0 mw-100">
        <table id="matrixHeadingsTable" class="table table-striped table-sm table-hover">
            <thead>
                <th scope="col">#</th>
                <th scope="col">Text</th>
                <th scope="col">Value</th>
            </thead>
            <tbody>
                {% for key, element in formfield.getAttributesJsonDecoded['headings'] %}
                    <tr data-rowid="{{ key }}">
                        <td class="align-middle text-center">
                            {{ key+1 }}
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-text newFormFieldInput" data-arrayName="headings" placeholder="Text" id="matrixOption-text-{{ key }}" value="{{ element['text'] }}">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-value newFormFieldInput" data-arrayName="headings" placeholder="Value" id="matrixOption-value-{{ key }}" value="{{ element['value'] }}">
                        </td>
                    </tr>
                {% else %}
                    <tr data-rowid="0">
                        <td class="align-middle text-center">
                            1
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-text newFormFieldInput" data-arrayName="headings" placeholder="Text" id="matrixOption-text-0">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-value newFormFieldInput" data-arrayName="headings" placeholder="Value" id="matrixOption-value-0" value="1">
                        </td>
                    </tr>
                    <tr data-rowid="1">
                        <td class="align-middle text-center">
                            2
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-text newFormFieldInput" data-arrayName="headings" placeholder="Text" id="matrixOption-text-1">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-heading-value newFormFieldInput" data-arrayName="headings" placeholder="Value" id="matrixOption-value-1" value="2">
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<label class="mb-2 mx-0 mt-0">Fragen:</label>
<div class="clearfix">
    <div class="card card-body p-0 m-0 border-0 mw-100">
        <table id="matrixQuestionTable" class="table table-striped table-sm table-hover">
            <thead>
                <th scope="col">&nbsp;</th>
                <th scope="col">Frage</th>
                <th scope="col">Meta</th>
                <th scope="col">&nbsp;</th>
            </thead>
            <tbody>
                {% for key, element in formfield.getAttributesJsonDecoded['questions'] %}
                    <tr data-rowid="{{ key }}">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-danger btn-sm matrixQuestionRemove" title="Frage löschen" {% if formfield.getAttributesJsonDecoded['elements']|length == 1 or formfield.countSubmissions > 0 %}disabled{% endif %}><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle w-75">
                            <input type="text" class="form-control matrix-option-question newFormFieldInput" data-arrayName="questions" placeholder="Frage" id="matrixOption-question-{{ key }}" value="{{ element['question'] }}">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-option-meta newFormFieldInput" data-arrayName="questions" placeholder="Meta" id="matrixOption-meta-{{ key }}" value="{{  element['meta'] }}">
                        </td>
                        <td class="align-middle text-center">
                            <i class="fas fa-ellipsis-h h1 m-0"></i>
                        </td>
                    </tr>
                {% else %} 
                    <tr data-rowid="0">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-danger btn-sm matrixQuestionRemove" title="Frage löschen" disabled><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle w-75">
                            <input type="text" class="form-control matrix-option-question newFormFieldInput" data-arrayName="questions" placeholder="Frage" id="matrixOption-question-0">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control matrix-option-meta newFormFieldInput" data-arrayName="questions" placeholder="Meta" id="matrixOption-meta-0">
                        </td>
                        <td class="align-middle text-center">
                            <i class="fas fa-ellipsis-h h1 m-0"></i>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <button class="btn btn-info float-right mb-3 mt-1" type="button" {% if formfield.countSubmissions == 0 %} id="matrixAddQuestionButton" {% else %} disabled {% endif %}><i class="fas fa-plus"></i>&nbsp;Hinzufügen</button>
</div>
<div class="accordion" id="matrixAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="matrixHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#matrixOptions"
                    aria-expanded="false" aria-controls="matrixOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="matrixOptions" class="collapse" aria-labelledby="matrixHeading" data-parent="#matrixAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadlinePosition">Position des Titels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="matrixHeadlinePosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadlineType">HTML-Element des Titels:</label>
                    <select class="form-control newFormFieldInput" id="matrixHeadlineType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h2") or formfield is null %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadlineCss">CSS Klassen für Titel:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixHeadlineCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixHeadlineCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headlineCss'] }}{% endif %}">
                    <small id="matrixHeadlineCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsPosition">Horizontale Position der Überschriften:</label>
                    <select class="form-control newFormFieldInput" size="1" id="matrixHeadingsPosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                    <small class="form-text text-muted"><b>Diese Auswahl ist nicht kompatibel mit der Option Überschriften um 90&deg; drehen und wird bei entsprechend ausgewählter Checkbox ignoriert!</b></small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsPositionVertical">Vertikale Position der Überschriften:</label>
                    <select class="form-control newFormFieldInput" size="1" id="matrixHeadingsPositionVertical">
                        <option value="top" {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionVertical'] == "top" %}selected{% endif %}>Oben</option>
                        <option value="middle"{% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionVertical'] == "middle" %}selected{% endif %}>Mittig</option>
                        <option value="bottom"{% if (formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionVertical'] == "bottom") or (formfield is null) %}selected{% endif %}>Unten</option>
                    </select>
                    <small class="form-text text-muted"><b>Diese Auswahl ist nicht kompatibel mit der Option Überschriften um 90&deg; drehen und wird bei entsprechend ausgewählter Checkbox ignoriert!</b></small>
                </div>
                <div class="form-check pl-0 mb-3  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixHeadingsPositionRotate" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionRotate'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixHeadingsPositionRotate">Überschriften um 90&deg; gedreht</label>
                </div>
                <div class="form-check pl-0 mb-3  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixHeadingsPositionRotateOnMobile" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionRotateOnMobile'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixHeadingsPositionRotateOnMobile">Überschriften auf Smartphones automatisch um 90&deg; gedreht</label> <small class="ml-2">Bis zu einer Breite von 768px</small>
                </div>
                 <div id="matrixHeadingsRotateHeightArea" class="form-group {% if formfield is null or not formfield.getAttributesJsonDecoded['headingsPositionRotate'] %}d-none{% endif %}">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsHeight">Höhe der 1. Tabellenzeile in px:</label>
                    <input type="number" min="0" step="1" class="form-control newFormFieldInput" id="matrixHeadingsHeight" placeholder="Höhe in px"
                        aria-describedby="matrixHeadingsHeightHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headingsHeight'] }}{% endif %}">
                    <small id="matrixHeadingsHeightHelp" class="form-text text-muted">Dieser Wert muss anhand der individuellen Überschriften angepasst werden. Bitte nur die Zahl in ganzen Pixeln angeben.</small>
                </div>
                <div class="form-check pl-0 mb-3  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixHeadingsPositionRepeatBottom" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsPositionRepeatBottom'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixHeadingsPositionRepeatBottom">Überschriften zusätzlich unter der Matrix anzeigen</label>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsType">HTML-Element der Überschriften:</label>
                    <select class="form-control newFormFieldInput" id="matrixHeadingsType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "h6") or formfield is null %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headingsType'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsCss">CSS Klassen für Überschriften:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixHeadingsCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixSubheadlineCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headingsCss'] }}{% endif %}">
                    <small id="matrixSubheadlineCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixHeadingsCssParent">CSS Klassen für Tabellenzelle der Überschriften:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixHeadingsCssParent" placeholder="CSS-Klassen"
                        aria-describedby="matrixHeadingsCssParentHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headingsCssParent'] }}{% endif %}">
                    <small id="matrixHeadingsCssParentHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionHeadline">Titel für Fragenspalte:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixQuestionHeadline" placeholder="Titel für Fragenspalte"
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['questionHeadline'] }}{% endif %}" aria-describedby="matrixQuestionHeadlineHelp">
                        <small id="matrixQuestionHeadlineHelp" class="form-text text-muted">Vertikale Orientierung ist abhängig von der Auswahl der vertikale Position der Überschriften.</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionHeadlineCss">CSS Klassen für die Fragenspalte:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixQuestionHeadlineCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixQuestionHeadlineCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['questionCss'] }}{% endif %}">
                    <small id="matrixQuestionHeadlineCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionPosition">Position der Fragen:</label>
                    <select class="form-control newFormFieldInput" size="1" id="matrixQuestionPosition">
                        <option value="left" {% if (formfield is not null and formfield.getAttributesJsonDecoded['questionPosition'] == "left") or formfield is null %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['questionPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['questionPosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionType">HTML-Element der Fragen:</label>
                    <select class="form-control newFormFieldInput" id="matrixQuestionType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['questionType'] == "span") or formfield is null %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionCss">CSS Klassen für die Fragen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixQuestionCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixQuestionCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['questionCss'] }}{% endif %}">
                    <small id="matrixQuestionCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixQuestionCssParent">CSS Klassen für die Tabellenzelle der Fragen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixQuestionCssParent" placeholder="CSS-Klassen"
                        aria-describedby="matrixQuestionCssParentHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['questionCssParent'] }}{% endif %}">
                    <small id="matrixQuestionCssParentHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixAnswerCss">CSS Klassen für Antwort-Element:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixAnswerCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixAnswerCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['answerCss'] }}{% endif %}">
                    <small id="matrixAnswerCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixAnswerCssParent">CSS Klassen für Tabellenzelle der Antwort:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixAnswerCssParent" placeholder="CSS-Klassen"
                        aria-describedby="matrixAnswerCssParentHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['answerCssParent'] }}{% endif %}">
                    <small id="matrixAnswerCssParentHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixTableCss">CSS Klassen für Tabelle:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixTableCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixTableCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['tableCss'] }}{% endif %}">
                    <small id="matrixTableCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="matrixParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="matrixParentCss" placeholder="CSS-Klassen"
                        aria-describedby="matrixParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="matrixParentCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixStriped" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['striped'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixStriped">Gestreifte Tabelle</label>
                </div>
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixBorder" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['border'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixBorder">Tabelle mit Rahmen</label>
                </div>
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixHover" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['hover'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixHover">Tabelle mit Hover-Effekt</label>
                </div>
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixSmall" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['small'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixSmall">Schmale Tabelle</label>
                </div>                
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixDisabled" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['disabled'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixDisabled">Disabled</label>
                </div>
                <div class="form-check pl-0 mb-2  d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="matrixRequired" style="margin-top: 0 !important;"
                        {% if formfield is null or formfield.getAttributesJsonDecoded['required'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="matrixRequired">Required</label>
                </div>
            </div>
        </div>
    </div>
</div>