{% autoescape false %}
    {{ form_start(form, {attr: attr|default({})}) }}

        {{ form_row(form.name) }}

        <div class="row">
            <div class="col-6">
                {{ form_row(form.type) }}
            </div>
            <div class="col-6">
                {{ form_row(form.status) }}
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                {{ form_row(form.level) }}
            </div>
            <div class="col-6 align-self-center">
                {{ form_row(form.random) }}
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                {{ form_row(form.startAt) }}
            </div>
            <div class="col-6">
                {{ form_row(form.endAt) }}
            </div>
        </div>


        <div class="p-3 mt-4 mb-4 bg-gradient bg-light">
            <p class="text-end mb-0">
                <a class="btn btn-primary" data-bs-toggle="collapse" href="#questions-selector" role="button" aria-controls="questions-selector">
                    <i class="fas fa-bars"></i>
                </a>
            </p>
            <div class="row collapse" id="questions-selector">
                <div class="col-9">
                    <table class="table table-hover table-striped datatable initspec" id="quiz_questions">
                        <thead class="thead-dark mt-2">
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">{{ 'question.label.id'|trans({}, 'admin') }}</th>
                                <th scope="col">{{ 'question.label.wording'|trans({}, 'admin') }}</th>
                                <th scope="col">{{ 'question.label.propositions'|trans({}, 'admin') }}</th>
                                <th scope="col">{{ 'question.label.level'|trans({}, 'admin') }}</th>
                                <th data-column="themes" data-visible="true"></th>
                                <th data-column="level" data-visible="true"></th>
                                <th data-column="type" data-visible="true"></th>
                                <th data-column="media" data-visible="true"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if questions is defined and questions is not empty %}
                                {% for question in questions %}
                                <tr class="{{ question.isSelected is defined and question.isSelected ? 'selected' }}">
                                    <td>
                                        {% set value = (question.isSelected is defined and question.isSelected) ? 1 : 0 %}
                                        <input type="hidden" data-id="{{ question.id }}" name="questions[{{ question.id }}]" value="{{ value }}"/>
                                    </td>
                                    <td>{{ question.id }}</td>
                                    <td>{{ question.wording }}</td>
                                    <td class="small">
                                        <ul>
                                            {% for proposition in question.propositions %}
                                                <li>
                                                    {{ proposition.wording }}
                                                    {{ (proposition.valid) ? '<i class="text-success far fa-check-square"></i>' : '<i class="text-danger fas fa-times"></i>' }}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </td>
                                    <td>{{ question.level }}</td>
                                    <td>
                                        {% if question.theme and question.theme is not empty %}
                                            {{ question.theme.id }}
                                        {% endif %}
                                    </td>
                                    <td>{{ question.level }}</td>
                                    <td>{{ question.type }}</td>
                                    <td>{{ question.media }}</td>
                                </tr>
                                {% endfor %}
                            {% endif %}
                        </tbody>
                    </table>
                </div>
                <div class="col-3">
                    <p class="lead text-end mb-4">
                       Sélectionnée(s): <span class="badge bg-success count-selected">{{ (quiz is defined) ? quiz.questions|length : 0}}</span>
                    </p>
                    <h4>Filtres</h4>
                    <div class="form-group">
                        <label for="filter_level">Niveau</label>
                        <select name="filter_level" class="form-control">
                            <option>Tous</option>
                            <option value="0" data-min="0" data-max="20">0 à 20</option>
                            <option value="20" data-min="20" data-max="40">20 à 40</option>
                            <option value="40" data-min="40" data-max="60">40 à 60</option>
                            <option value="60" data-min="60" data-max="80">60 à 80</option>
                            <option value="80" data-min="80" data-max="100">80 à 100</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="filter_theme">Thème</label>
                        <select name="filter_theme" class="form-control">
                            <option value="">Tous</option>
                            {% if themes is defined and themes is not empty %}
                                {% for theme in themes %}
                                <option value="{{ theme.id }}">{{ theme.name|raw }}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="filter_media">Média</label>
                        <select name="filter_media" class="form-control">
                            <option>Tous</option>
                            <option value="1">Avec</option>
                            <option value="0">Sans</option>
                            <option value="video">Vidéo</option>
                            <option value="audio">Audio</option>
                            <option value="image">Image</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="filter_type">Type</label>
                        <select name="filter_type" class="form-control">
                            <option>Tous</option>
                            <option value="qcu">Question à choix unique</option>
                            <option value="qcm">Question à choix multiple</option>
                            <option value="qou">Question ouverte</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox" id="filter_selected" name="filter_selected" class="form-check-input" value="1">
                            <label class="form-check-label" for="filter_selected">N'afficher que les sélectionnées</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <p>
            {{ form_widget(form.save, {'label': (quiz is defined) ? 'label.edit' : 'label.create'}) }}

            {{
                (quiz is defined) ?
                    form_widget(form.save_and_create, {'label': 'label.save_and_keep'}) :
                    form_widget(form.save_and_create, {'label': 'label.save_and_create_new'})
            }}

            {% if include_back_to_home_link|default(true) %}
                <a href="{{ path('admin_quiz_home') }}" class="btn btn-link">
                    <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
                </a>
            {% endif %}
        </p>
    {{ form_end(form) }}
{% endautoescape %}