{% if question is defined and question is not null %}
    <div class="card mb-4">
        <div class="card-header">{{ 'question.validation.content_label'|trans({}, 'admin') }}</div>

        <div class="card-body">
            <div class="row">
                <div class="col-8">
                    <p class="mb-2">
                        <strong>{{ 'label.label'|trans }}</strong>: {{ question.wording }}
                    </p>
                    {% if question.help is defined and question.help is not empty %}
                        <p class="mb-2">
                            <strong>{{ 'label.help'|trans }}</strong>: {{ question.help }}
                        </p>
                    {% endif %}
                    <p class="mb-2">
                        <strong>{{ 'label.type'|trans }}</strong>: {{ question.type }}
                    </p>
                    <p class="mb-1">
                        <strong>{{ 'label.propositions'|trans }}</strong>:
                    </p>
                    <ul>
                        {% if question.propositions is defined and question.propositions is iterable and question.propositions|length > 0 %}
                            {% 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 %}
                        {% else %}
                            <li>{{ 'question.validation.no_proposition'|trans({}, 'admin') }}</li>
                        {% endif %}
                    </ul>
                    <p class="mb-1">
                        <strong>{{ 'label.theme.theme'|trans }}</strong>:
                    </p>
                    <ul>
                        {% if question.theme %}
                            <li>{{ question.theme.name }}</li>
                        {% else %}
                            <li>{{ 'question.validation.no_theme'|trans({}, 'admin') }}</li>
                        {% endif %}
                    </ul>
                    {% if question.information is defined and question.information is not empty %}
                        <p class="mb-1">
                            <strong>{{ 'label.information'|trans }}</strong>:
                        </p>
                        <p class="mb-2">
                            {{ question.information }}
                        </p>
                    {% endif %}
                    {% if question.source is defined and question.source is not empty %}
                        <p class="mb-2">
                            <strong>{{ 'label.source'|trans }}</strong>: {{ question.source }}
                        </p>
                    {% endif %}
                </div>
                <div class="col-4">
                    <p class="mb-1">
                        <strong>{{ 'label.media'|trans }}</strong>:
                    </p>
                    <p class="mb-2">
                        {% if question.media is defined and question.media is not empty %}
                            {% set mediaExtension = question.media|split('.')|last %}
                            {% if mediaExtension in ['mp4', 'flv', 'mpeg'] %}
                                <video preload="auto" width="480" height="270" controls>
                                    <source src="{{ '/uploads/question/medias/' ~ question.media }}" type="video/{{ mediaExtension }}">
                                </video>
                            {% elseif mediaExtension in ['mp3'] %}
                                <figure>
                                    <audio controls>
                                        <source src="{{ '/uploads/question/medias/' ~ question.media }}" type="audio/{{ mediaExtension }}">
                                    </audio>
                                </figure>
                            {% elseif mediaExtension in ['jpeg', 'jpg', 'png', 'gif'] %}
                                <img style="max-width: 100%; max-height: 200px;" src="{{ '/uploads/question/medias/' ~ question.media }}">
                            {% else %}
                                {{ 'question.validation.unauthorized_media'|trans({}, 'admin') }} :
                                {{ question.media }}
                            {% endif %}
                        {% else %}
                            {{ 'question.validation.no_media'|trans({}, 'admin') }}
                        {% endif %}
                    <p>
                    <p class="mb-1">
                        <strong>{{ 'label.illustration'|trans }}</strong>:
                    </p>
                    <p class="mb-2">
                        {% if question.illustration is defined and question.illustration is not empty %}
                            <img style="max-width: 100%; max-height: 200px;" src="{{ '/uploads/question/illustrations/' ~ question.illustration }}">
                        {% else %}
                            {{ 'question.validation.no_illustration'|trans({}, 'admin') }}
                        {% endif %}
                    <p>
                </div>
            </div>
        </div>
    </div>
{% endif %}