<div class="modal overflow-auto fade" id="assembleFormModal" tabindex="-1" role="dialog" aria-labelledby="assembleFormModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="assembleFormModalLabel">Formularfeld hinzufügen</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="newFormFieldForm">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-textfeld-tab" data-toggle="tab" href="#nav-textfeld" role="tab" aria-controls="nav-textfeld" aria-selected="true"><i class="fas fa-font"></i> Textfeld</a>
                            <a class="nav-item nav-link" id="nav-textbox-tab" data-toggle="tab" href="#nav-textbox" role="tab" aria-controls="nav-profile" aria-selected="false"><i class="fas fa-align-justify"></i> Textbox</a>
                            <a class="nav-item nav-link" id="nav-dropdown-tab" data-toggle="tab" href="#nav-dropdown" role="tab" aria-controls="nav-dropdown" aria-selected="false"><i class="far fa-caret-square-down"></i> Dropdown</a>
                            <a class="nav-item nav-link" id="nav-radio-tab" data-toggle="tab" href="#nav-radio" role="tab" aria-controls="nav-radio" aria-selected="false"><i class="far fa-dot-circle"></i> Radio-Button</a>
                            <a class="nav-item nav-link" id="nav-checkbox-tab" data-toggle="tab" href="#nav-checkbox" role="tab" aria-controls="nav-checkbox" aria-selected="false"><i class="far fa-check-square"></i> Checkbox</a>
                            <a class="nav-item nav-link" id="nav-slider-tab" data-toggle="tab" href="#nav-slider" role="tab" aria-controls="nav-slider" aria-selected="false"><i class="fas fa-sliders-h"></i> Slider</a>
                            <a class="nav-item nav-link" id="nav-text-tab" data-toggle="tab" href="#nav-text" role="tab" aria-controls="nav-slider" aria-selected="false"><i class="fas fa-paragraph"></i> Text</a>
                            <a class="nav-item nav-link" id="nav-scale-tab" data-toggle="tab" href="#nav-scale" role="tab" aria-controls="nav-scale" aria-selected="false"><i class="fas fa-grip-horizontal"></i> Skala</a>
                            <a class="nav-item nav-link" id="nav-matrix-tab" data-toggle="tab" href="#nav-matrix" role="tab" aria-controls="nav-matrix" aria-selected="false"><i class="fas fa-th"></i> Matrix</a>
                            <a class="nav-item nav-link" id="nav-upload-tab" data-toggle="tab" href="#nav-upload" role="tab" aria-controls="nav-upload" aria-selected="false"><i class="fas fa-file-upload"></i> Upload</a>
                            <a class="nav-item nav-link" id="nav-captcha-tab" data-toggle="tab" href="#nav-captcha" role="tab" aria-controls="nav-captcha" aria-selected="false"><i class="fas fa-robot"></i> Captcha</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        {#########################################           Textfeld           #############################################}
                        <div class="tab-pane fade show active p-4" id="nav-textfeld" role="tabpanel" aria-labelledby="nav-textfeld-tab">
                            <h4>Textfeld</h4>
                            <input class="newFormFieldType" type="hidden" value="input">
                            {% include 'forms/backend-form-assemble-modal-input.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Textarea           #############################################}
                        <div class="tab-pane fade p-4" id="nav-textbox" role="tabpanel" aria-labelledby="nav-textbox-tab">
                            <h4 class="mb-0">Textbox</h4>
                            <div class="mb-2"><small>(Mehrzeiliges Textfeld/Textarea)</small></div>
                            <input class="newFormFieldType" type="hidden" value="textarea">
                            {% include 'forms/backend-form-assemble-modal-textarea.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Select           #############################################}
                        <div class="tab-pane fade p-4" id="nav-dropdown" role="tabpanel" aria-labelledby="nav-dropdown-tab">
                            <h4>Dropdown</h4>
                            <input class="newFormFieldType" type="hidden" value="select">
                            {% include 'forms/backend-form-assemble-modal-select.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Radio-Button           #############################################}
                        <div class="tab-pane fade p-4" id="nav-radio" role="tabpanel" aria-labelledby="nav-radio-tab">
                            <h4>Radio-Button</h4>
                            <input class="newFormFieldType" type="hidden" value="radio">
                            {% include 'forms/backend-form-assemble-modal-radio.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Checkbox           #############################################}
                        <div class="tab-pane fade p-4" id="nav-checkbox" role="tabpanel" aria-labelledby="nav-checkbox-tab">
                            <h4>Checkbox</h4>
                            <input class="newFormFieldType" type="hidden" value="checkbox">
                            {% include 'forms/backend-form-assemble-modal-checkbox.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Slider           #############################################}
                        <div class="tab-pane fade p-4" id="nav-slider" role="tabpanel" aria-labelledby="nav-slider-tab">
                            <h4>Slider</h4>
                            <input class="newFormFieldType" type="hidden" value="slider">
                            {% include 'forms/backend-form-assemble-modal-slider.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Text           #############################################}
                        <div class="tab-pane fade p-4" id="nav-text" role="tabpanel" aria-labelledby="nav-text-tab">
                            <h4>Text</h4>
                            <input class="newFormFieldType" type="hidden" value="text">
                            {% include 'forms/backend-form-assemble-modal-text.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Skala           #############################################}
                        <div class="tab-pane fade p-4" id="nav-scale" role="tabpanel" aria-labelledby="nav-scale-tab">
                            <h4>Skala</h4>
                            <div class="mb-2"><small>(Skala mit tabellenartigen Antwortmöglichkeiten mit Labeln für Unter- und Obergrenze)<br><b>Nicht für MultiForms geeignet!</b></small></div>
                            <input class="newFormFieldType" type="hidden" value="scale">
                            {% include 'forms/backend-form-assemble-modal-scale.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Matrix           #############################################}
                        <div class="tab-pane fade p-4" id="nav-matrix" role="tabpanel" aria-labelledby="nav-matrix-tab">
                            <h4>Matrix</h4>
                            <div class="mb-2"><small>(Tabelle im Format Antwortmatrix, welche die Zusammenfassung verschiedener themenbezogener Fragegruppen ermöglicht)<br><b>Nicht für MultiForms geeignet!</b></small></div>
                            <input class="newFormFieldType" type="hidden" value="matrix">
                            {% include 'forms/backend-form-assemble-modal-matrix.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Upload           #############################################}
                        <div class="tab-pane fade p-4" id="nav-upload" role="tabpanel" aria-labelledby="nav-upload-tab">
                            <h4>Upload</h4>
                            <div class="mb-2"><small>Integriert einen Dateiupload</small></div>
                            <input class="newFormFieldType" type="hidden" value="upload">
                            {% include 'forms/backend-form-assemble-modal-upload.html' with {'formobject': null} %}
                        </div>
                        {#########################################           Captcha           #############################################}
                        <div class="tab-pane fade p-4" id="nav-captcha" role="tabpanel" aria-labelledby="nav-captcha-tab">
                            <h4>Captcha</h4>
                            <div class="mb-2"><small>Integriert ein Captcha um das Absenden von Formularen abzusichern.<br><b>Nur einmalig pro Seite zu verwenden!</b><br><b>Nicht für MultiForms geeignet!</b></small></div>
                            <input class="newFormFieldType" type="hidden" value="captcha">
                            {% include 'forms/backend-form-assemble-modal-captcha.html' with {'formobject': null} %}
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <div class="alert alert-danger my-3 d-none w-100" role="alert" id="newFormfieldErrorText">
                    <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
                    <p>
                        Die Eingaben sind ungültig. Bitte überprüfen Sie diese und versuchen Sie es erneut.
                    </p>
                </div>
                <button type="button" class="btn btn-secondary float-left" data-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="newFormFieldSubmit">Feld hinzufügen</button>
            </div>
        </div>
    </div>
</div>