feat: quiz page question rework (#181)

- Replace Bootstrap accordion with flat card list for questions
- Add HTML5 drag-and-drop reordering with placeholder-between-cards UX
  and amber/green/red save status indicator next to the heading
- Add edit button per question opening a Bootstrap modal (bo--modal-form
  Stimulus controller with X-Modal-Request header pattern)
- Show read-only view button instead of edit for locked/finalized quizzes
- Add BankQuestion edit modal in question bank tab using same infrastructure
- Move modal action buttons into modal-footer via <template data-modal-footer>
- Fix IS_AUTHENTICATED_FULLY 403: replace ROLE_USER with IS_AUTHENTICATED
  on all backoffice controllers and in security.yaml access_control

Dockerfile

@@ -32,7 +32,6 @@ RUN set -eux; \
 		opcache \
 		zip \
 		gd \
-		excimer \
 	;
 
 # https://getcomposer.org/doc/03-cli.md#composer-allow-superuser

assets/backoffice.js

@@ -16,11 +16,13 @@ const effectiveDsn = dsn || 'https://0@o0.ingest.sentry.io/0';
 
 const feedbackIntegration = Sentry.feedbackIntegration({
     colorScheme: 'system',
-    showName: true,
+    showName: false,
     showEmail: true,
-    isNameRequired: false,
     isEmailRequired: false,
     autoInject: false,
+    triggerLabel: 'Report feedback',
+    formTitle: 'Report Feedback',
+    submitButtonLabel: 'Send Feedback',
 });
 
 Sentry.init({

assets/controllers/bo/modal_form_controller.js

@@ -0,0 +1,56 @@
+import {Controller} from '@hotwired/stimulus';
+import {Modal} from 'bootstrap';
+
+export default class extends Controller {
+  static targets = ['modal', 'modalBody', 'modalFooter'];
+
+  async open(event) {
+    event.preventDefault();
+    const url = event.currentTarget.dataset.url;
+    const title = event.currentTarget.dataset.modalTitle;
+    if (title) {
+      const titleEl = this.modalTarget.querySelector('.modal-title');
+      if (titleEl) titleEl.textContent = title;
+    }
+    const modal = Modal.getOrCreateInstance(this.modalTarget);
+    this.modalBodyTarget.innerHTML = '<div class="text-center py-4"><div class="spinner-border" role="status"></div></div>';
+    if (this.hasModalFooterTarget) this.modalFooterTarget.innerHTML = '';
+    modal.show();
+    await this._loadForm(url);
+  }
+
+  async _loadForm(url) {
+    const res = await fetch(url, {headers: {'X-Modal-Request': '1'}});
+    this.modalBodyTarget.innerHTML = await res.text();
+    this._moveFooter();
+    this._bindForm(url);
+  }
+
+  _moveFooter() {
+    if (!this.hasModalFooterTarget) return;
+    const template = this.modalBodyTarget.querySelector('template[data-modal-footer]');
+    this.modalFooterTarget.innerHTML = template ? template.innerHTML : '';
+    if (template) template.remove();
+  }
+
+  _bindForm(url) {
+    const form = this.modalBodyTarget.querySelector('form');
+    if (!form) return;
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {'X-Modal-Request': '1'},
+        body: new FormData(form),
+      });
+      if (res.status === 204) {
+        Modal.getOrCreateInstance(this.modalTarget).hide();
+        window.location.reload();
+      } else {
+        this.modalBodyTarget.innerHTML = await res.text();
+        this._moveFooter();
+        this._bindForm(url);
+      }
+    }, {once: true});
+  }
+}

assets/controllers/bo/question_list_controller.js

@@ -0,0 +1,121 @@
+import {Controller} from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['list', 'item', 'status'];
+  static values = {
+    reorderUrl: String,
+    csrf: String,
+    canModify: Boolean,
+    savedLabel: String,
+    errorLabel: String,
+  };
+
+  connect() {
+    if (this.canModifyValue) {
+      this._setupDrag();
+    }
+  }
+
+  _setupDrag() {
+    this.itemTargets.forEach(el => {
+      const handle = el.querySelector('[data-drag-handle]');
+      if (!handle) return;
+
+      handle.setAttribute('draggable', 'true');
+
+      handle.addEventListener('dragstart', (e) => {
+        this._dragging = el;
+        e.dataTransfer.effectAllowed = 'move';
+        setTimeout(() => el.classList.add('opacity-50'), 0);
+      });
+
+      handle.addEventListener('dragend', () => {
+        el.classList.remove('opacity-50');
+        this._dragging = null;
+        this._removePlaceholder();
+      });
+    });
+
+    this.listTarget.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      if (!this._dragging) return;
+      e.dataTransfer.dropEffect = 'move';
+
+      const target = e.target.closest('[data-bo--question-list-target="item"]');
+      if (!target || target === this._dragging) return;
+
+      const rect = target.getBoundingClientRect();
+      const insertBefore = e.clientY > rect.top + rect.height / 2 ? target.nextSibling : target;
+
+      if (!this._placeholder) {
+        this._placeholder = document.createElement('div');
+        this._placeholder.className = 'bg-primary rounded mb-2';
+        this._placeholder.style.height = '3px';
+      }
+
+      if (this._placeholder.nextSibling !== insertBefore) {
+        this.listTarget.insertBefore(this._placeholder, insertBefore);
+      }
+    });
+
+    this.listTarget.addEventListener('dragleave', (e) => {
+      if (!e.relatedTarget || !this.listTarget.contains(e.relatedTarget)) {
+        this._removePlaceholder();
+      }
+    });
+
+    this.listTarget.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      if (!this._dragging || !this._placeholder) return;
+      this.listTarget.insertBefore(this._dragging, this._placeholder);
+      this._removePlaceholder();
+      await this._persistOrder();
+    });
+  }
+
+  _removePlaceholder() {
+    if (this._placeholder) {
+      this._placeholder.remove();
+      this._placeholder = null;
+    }
+  }
+
+  _setStatus(state) {
+    if (!this.hasStatusTarget) return;
+    const el = this.statusTarget;
+    el.classList.remove('d-none', 'text-bg-success', 'text-bg-danger', 'text-bg-warning');
+    if (state === 'saving') {
+      el.classList.add('text-bg-warning');
+      el.textContent = '…';
+    } else if (state === 'saved') {
+      el.classList.add('text-bg-success');
+      el.textContent = this.savedLabelValue || 'Saved';
+    } else if (state === 'error') {
+      el.classList.add('text-bg-danger');
+      el.textContent = this.errorLabelValue || 'Error';
+    }
+  }
+
+  async _persistOrder() {
+    this._setStatus('saving');
+
+    const params = new URLSearchParams();
+    params.append('_token', this.csrfValue);
+    this.itemTargets.forEach((el, i) => {
+      params.append('ordering[]', el.dataset.questionId);
+      const numberEl = el.querySelector('[data-question-number]');
+      if (numberEl) numberEl.textContent = String(i + 1);
+    });
+
+    try {
+      const res = await fetch(this.reorderUrlValue, {method: 'POST', body: params});
+      if (res.ok) {
+        this._setStatus('saved');
+      } else {
+        this._setStatus('error');
+      }
+    } catch {
+      this._setStatus('error');
+    }
+  }
+}

config/packages/security.yaml

@@ -30,7 +30,7 @@ security:
 
     access_control:
         - { path: ^/admin, roles: ROLE_ADMIN }
-        - { path: ^/backoffice, roles: ROLE_USER }
+        - { path: ^/backoffice, roles: IS_AUTHENTICATED }
 
 when@test:
     security:

src/Controller/Backoffice/BackofficeController.php

@@ -24,7 +24,7 @@ use Tvdt\Security\Voter\SeasonVoter;
 use Tvdt\Service\QuizSpreadsheetService;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 final class BackofficeController extends AbstractController
 {
     public function __construct(

src/Controller/Backoffice/QuestionBankController.php

@@ -38,7 +38,7 @@ use Tvdt\Security\Voter\SeasonVoter;
 use Tvdt\Service\QuestionBankService;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 class QuestionBankController extends AbstractController
 {
     public function __construct(
@@ -120,6 +120,8 @@ class QuestionBankController extends AbstractController
     {
         $this->assertSameSeason($season, $bankQuestion->season);
 
+        $isModalRequest = $request->headers->has('X-Modal-Request');
+
         $form = $this->createForm(BankQuestionFormType::class, $bankQuestion, ['season' => $season]);
         $form->handleRequest($request);
 
@@ -130,14 +132,29 @@ class QuestionBankController extends AbstractController
 
             $this->addFlash(FlashType::Success, $this->translator->trans('Question updated'));
 
+            if ($isModalRequest) {
+                return new Response('', Response::HTTP_NO_CONTENT);
+            }
+
             return $this->redirectToRoute('tvdt_backoffice_question_bank', ['seasonCode' => $season->seasonCode]);
         }
 
-        return $this->render('backoffice/question_bank/form.html.twig', [
+        $template = $isModalRequest
+            ? 'backoffice/question_bank/_form_body.html.twig'
+            : 'backoffice/question_bank/form.html.twig';
+
+        $response = $this->render($template, [
             'season' => $season,
             'form' => $form,
             'bankQuestion' => $bankQuestion,
+            'isModal' => $isModalRequest,
         ]);
+
+        if ($form->isSubmitted()) {
+            $response->setStatusCode(Response::HTTP_UNPROCESSABLE_ENTITY);
+        }
+
+        return $response;
     }
 
     #[IsCsrfTokenValid('delete_bank_question')]

src/Controller/Backoffice/QuizController.php

@@ -30,7 +30,7 @@ use Tvdt\Repository\QuizRepository;
 use Tvdt\Security\Voter\SeasonVoter;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 class QuizController extends AbstractController
 {
     public function __construct(

src/Controller/Backoffice/QuizQuestionController.php

@@ -8,9 +8,11 @@ use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Attribute\AsController;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Routing\Requirement\Requirement;
+use Symfony\Component\Security\Http\Attribute\IsCsrfTokenValid;
 use Symfony\Component\Security\Http\Attribute\IsGranted;
 use Symfony\Contracts\Translation\TranslatorInterface;
 use Tvdt\Controller\AbstractController;
@@ -22,7 +24,7 @@ use Tvdt\Form\QuestionFormType;
 use Tvdt\Security\Voter\SeasonVoter;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 class QuizQuestionController extends AbstractController
 {
     public function __construct(
@@ -42,6 +44,8 @@ class QuizQuestionController extends AbstractController
             throw new NotFoundHttpException();
         }
 
+        $isModalRequest = $request->headers->has('X-Modal-Request');
+
         $form = $this->createForm(QuestionFormType::class, $question);
         $form->handleRequest($request);
 
@@ -51,18 +55,87 @@ class QuizQuestionController extends AbstractController
 
             $this->addFlash(FlashType::Success, $this->translator->trans('Question updated'));
 
+            if ($isModalRequest) {
+                return new Response('', Response::HTTP_NO_CONTENT);
+            }
+
             return $this->redirectToRoute('tvdt_backoffice_quiz_overview', [
                 'seasonCode' => $season->seasonCode,
                 'quiz' => $quiz->id,
             ]);
         }
 
-        return $this->render('backoffice/quiz/question_form.html.twig', [
+        $template = $isModalRequest
+            ? 'backoffice/quiz/_question_form_body.html.twig'
+            : 'backoffice/quiz/question_form.html.twig';
+
+        $response = $this->render($template, [
             'season' => $season,
             'quiz' => $quiz,
             'question' => $question,
             'form' => $form,
+            'isModal' => $isModalRequest,
         ]);
+
+        if ($form->isSubmitted()) {
+            $response->setStatusCode(Response::HTTP_UNPROCESSABLE_ENTITY);
+        }
+
+        return $response;
+    }
+
+    #[Route(
+        '/backoffice/season/{seasonCode:season}/quiz/{quiz}/question/{question}/view',
+        name: 'tvdt_backoffice_quiz_question_view',
+        requirements: ['seasonCode' => self::SEASON_CODE_REGEX, 'quiz' => Requirement::UUID, 'question' => Requirement::UUID],
+    )]
+    public function view(Season $season, Quiz $quiz, Question $question): Response
+    {
+        if ($question->quiz !== $quiz || $quiz->season !== $season) {
+            throw new NotFoundHttpException();
+        }
+
+        return $this->render('backoffice/quiz/_question_detail_body.html.twig', [
+            'question' => $question,
+        ]);
+    }
+
+    #[IsCsrfTokenValid('question_reorder')]
+    #[IsGranted(SeasonVoter::MODIFY_QUIZ_CONTENT, subject: 'quiz')]
+    #[Route(
+        '/backoffice/season/{seasonCode:season}/quiz/{quiz}/questions/reorder',
+        name: 'tvdt_backoffice_quiz_questions_reorder',
+        requirements: ['seasonCode' => self::SEASON_CODE_REGEX, 'quiz' => Requirement::UUID],
+        methods: ['POST'],
+    )]
+    public function reorder(Season $season, Quiz $quiz, Request $request): Response
+    {
+        if ($quiz->season !== $season) {
+            throw new NotFoundHttpException();
+        }
+
+        /** @var list<string> $ordering */
+        $ordering = $request->request->all('ordering');
+
+        $questionsById = [];
+        foreach ($quiz->questions as $question) {
+            $questionsById[$question->id->toString()] = $question;
+        }
+
+        foreach ($ordering as $questionId) {
+            if (!isset($questionsById[$questionId])) {
+                throw new BadRequestHttpException(\sprintf('Unknown question id: %s', $questionId));
+            }
+        }
+
+        $position = 1;
+        foreach ($ordering as $questionId) {
+            $questionsById[$questionId]->ordering = $position++;
+        }
+
+        $this->em->flush();
+
+        return new Response('', Response::HTTP_NO_CONTENT);
     }
 
     private function applyAnswerOrdering(Question $question): void

src/Controller/Backoffice/SeasonController.php

@@ -30,7 +30,7 @@ use Tvdt\Security\Voter\SeasonVoter;
 use Tvdt\Service\QuizSpreadsheetService;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 class SeasonController extends AbstractController
 {
     public function __construct(

src/Controller/EliminationController.php

@@ -23,7 +23,7 @@ use Tvdt\Security\Voter\SeasonVoter;
 use function Symfony\Component\Translation\t;
 
 #[AsController]
-#[IsGranted('ROLE_USER')]
+#[IsGranted('IS_AUTHENTICATED')]
 final class EliminationController extends AbstractController
 {
     public function __construct(private readonly TranslatorInterface $translator, private readonly CandidateRepository $candidateRepository) {}

templates/backoffice/question_bank/_form_body.html.twig

@@ -0,0 +1,37 @@
+{% import 'backoffice/partials/answer_row.html.twig' as macros %}
+
+{{ form_start(form) }}
+{{ form_row(form.question) }}
+{{ form_row(form.reusable) }}
+{{ form_row(form.labels) }}
+
+<div data-controller="bo--form-collection"
+     data-bo--form-collection-prototype-value="{{ macros.answer_row(form.answers.vars.prototype)|e('html_attr') }}">
+    {{ form_label(form.answers) }}
+    {{ form_errors(form.answers) }}
+    <div data-bo--form-collection-target="collection">
+        {% for answerForm in form.answers %}
+            {{ macros.answer_row(answerForm) }}
+        {% endfor %}
+    </div>
+    {% do form.answers.setRendered %}
+    <div class="d-flex gap-2 mb-3">
+        <button type="button" class="btn btn-sm btn-outline-primary"
+                data-action="bo--form-collection#addItem">{{ 'Add answer'|trans }}</button>
+        <button type="button" class="btn btn-sm btn-outline-secondary"
+                data-action="bo--form-collection#sortAlphabetically">{{ 'Sort A–Z'|trans }}</button>
+        <button type="button" class="btn btn-sm btn-outline-secondary"
+                data-action="bo--form-collection#randomize">{{ 'Randomize'|trans }}</button>
+    </div>
+</div>
+
+{% if isModal ?? false %}
+    {% do form.save.setRendered %}
+{% endif %}
+{{ form_end(form) }}
+{% if isModal ?? false %}
+<template data-modal-footer>
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
+    <button type="submit" form="{{ form.vars.id }}" class="btn btn-primary">{{ 'Save'|trans }}</button>
+</template>
+{% endif %}

templates/backoffice/question_bank/form.html.twig

@@ -18,33 +18,7 @@
     <div class="row">
         <div class="col-md-6 col-12">
             <h2 class="mb-3">{{ bankQuestion is null ? 'Add question'|trans : 'Edit question'|trans }}</h2>
-
-            {{ form_start(form) }}
-            {{ form_row(form.question) }}
-            {{ form_row(form.reusable) }}
-            {{ form_row(form.labels) }}
-
-            <div data-controller="bo--form-collection"
-                 data-bo--form-collection-prototype-value="{{ macros.answer_row(form.answers.vars.prototype)|e('html_attr') }}">
-                {{ form_label(form.answers) }}
-                {{ form_errors(form.answers) }}
-                <div data-bo--form-collection-target="collection">
-                    {% for answerForm in form.answers %}
-                        {{ macros.answer_row(answerForm) }}
-                    {% endfor %}
-                </div>
-                {% do form.answers.setRendered %}
-                <div class="d-flex gap-2 mb-3">
-                    <button type="button" class="btn btn-sm btn-outline-primary"
-                            data-action="bo--form-collection#addItem">{{ 'Add answer'|trans }}</button>
-                    <button type="button" class="btn btn-sm btn-outline-secondary"
-                            data-action="bo--form-collection#sortAlphabetically">{{ 'Sort A–Z'|trans }}</button>
-                    <button type="button" class="btn btn-sm btn-outline-secondary"
-                            data-action="bo--form-collection#randomize">{{ 'Randomize'|trans }}</button>
-                </div>
-            </div>
-
-            {{ form_end(form) }}
+            {{ include('backoffice/question_bank/_form_body.html.twig') }}
         </div>
         <div class="col-md-6 col-12">
             {{ include('backoffice/help/quiz_question_bank_form.html.twig') }}

templates/backoffice/quiz/_question_detail_body.html.twig

@@ -0,0 +1,21 @@
+<p class="fw-semibold mb-3">{{ question.question }}</p>
+
+<ul class="list-group">
+    {% for answer in question.answers %}
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+            <span{% if answer.isRightAnswer %} class="fw-semibold"{% endif %}>
+                {% if answer.isRightAnswer %}<i class="bi bi-check-circle-fill text-success me-1"></i>{% endif %}
+                {{ answer.text }}
+            </span>
+            {% if answer.candidates|length > 0 %}
+                <span class="text-muted small">{{ answer.candidates|map(c => c.name)|join(', ') }}</span>
+            {% endif %}
+        </li>
+    {% else %}
+        <li class="list-group-item text-muted">{{ 'There are no answers for this question'|trans }}</li>
+    {% endfor %}
+</ul>
+
+<template data-modal-footer>
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Close'|trans }}</button>
+</template>

templates/backoffice/quiz/_question_form_body.html.twig

@@ -0,0 +1,35 @@
+{% import 'backoffice/partials/answer_row.html.twig' as macros %}
+
+{{ form_start(form) }}
+{{ form_row(form.question) }}
+
+<div data-controller="bo--form-collection"
+     data-bo--form-collection-prototype-value="{{ macros.answer_row(form.answers.vars.prototype)|e('html_attr') }}">
+    {{ form_label(form.answers) }}
+    {{ form_errors(form.answers) }}
+    <div data-bo--form-collection-target="collection">
+        {% for answerForm in form.answers %}
+            {{ macros.answer_row(answerForm) }}
+        {% endfor %}
+    </div>
+    {% do form.answers.setRendered %}
+    <div class="d-flex gap-2 mb-3">
+        <button type="button" class="btn btn-sm btn-outline-primary"
+                data-action="bo--form-collection#addItem">{{ 'Add answer'|trans }}</button>
+        <button type="button" class="btn btn-sm btn-outline-secondary"
+                data-action="bo--form-collection#sortAlphabetically">{{ 'Sort A–Z'|trans }}</button>
+        <button type="button" class="btn btn-sm btn-outline-secondary"
+                data-action="bo--form-collection#randomize">{{ 'Randomize'|trans }}</button>
+    </div>
+</div>
+
+{% if isModal ?? false %}
+    {% do form.save.setRendered %}
+{% endif %}
+{{ form_end(form) }}
+{% if isModal ?? false %}
+<template data-modal-footer>
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
+    <button type="submit" form="{{ form.vars.id }}" class="btn btn-primary">{{ 'Save'|trans }}</button>
+</template>
+{% endif %}

templates/backoffice/quiz/question_form.html.twig

@@ -18,31 +18,7 @@
     <div class="row">
         <div class="col-md-6 col-12">
             <h2 class="mb-3">{{ 'Edit question'|trans }}</h2>
-
-            {{ form_start(form) }}
-            {{ form_row(form.question) }}
-
-            <div data-controller="bo--form-collection"
-                 data-bo--form-collection-prototype-value="{{ macros.answer_row(form.answers.vars.prototype)|e('html_attr') }}">
-                {{ form_label(form.answers) }}
-                {{ form_errors(form.answers) }}
-                <div data-bo--form-collection-target="collection">
-                    {% for answerForm in form.answers %}
-                        {{ macros.answer_row(answerForm) }}
-                    {% endfor %}
-                </div>
-                {% do form.answers.setRendered %}
-                <div class="d-flex gap-2 mb-3">
-                    <button type="button" class="btn btn-sm btn-outline-primary"
-                            data-action="bo--form-collection#addItem">{{ 'Add answer'|trans }}</button>
-                    <button type="button" class="btn btn-sm btn-outline-secondary"
-                            data-action="bo--form-collection#sortAlphabetically">{{ 'Sort A–Z'|trans }}</button>
-                    <button type="button" class="btn btn-sm btn-outline-secondary"
-                            data-action="bo--form-collection#randomize">{{ 'Randomize'|trans }}</button>
-                </div>
-            </div>
-
-            {{ form_end(form) }}
+            {{ include('backoffice/quiz/_question_form_body.html.twig') }}
         </div>
         <div class="col-md-6 col-12">
             {{ include('backoffice/help/quiz_question_bank_form.html.twig') }}

templates/backoffice/quiz/tab_overview.html.twig

@@ -85,51 +85,73 @@
         </a>
     </div>
 
-    <h4 class="mb-3">{{ 'Questions'|trans }}</h4>
-    <div class="accordion">
-        {%~ for question in quiz.questions ~%}
-            <div class="accordion-item">
-                <h2 class="accordion-header">
-                    <button class="accordion-button collapsed"
-                            type="button"
-                            data-bs-toggle="collapse"
-                            data-bs-target="#question-{{ loop.index0 }}"
-                            aria-controls="question-{{ loop.index0 }}">
-                        {% set questionError = questionErrors[question.id.toString] ?? null %}
-                        <span
-                            class="badge rounded-pill me-2{% if questionError %} text-bg-danger{% else %} invisible{% endif %}"{% if questionError %} data-bs-toggle="tooltip" title="{{ questionError }}"{% endif %}>!</span>
-                        {{~ loop.index -}}. {{ question.question -}}
-                    </button>
-                </h2>
-                <div id="question-{{ loop.index0 }}"
-                     class="accordion-collapse collapse">
-                    <div class="accordion-body">
-                        {% if is_granted('QUIZ_MODIFY_CONTENT', question) %}
-                            <a class="btn btn-sm btn-outline-secondary mb-2"
-                               href="{{ path('tvdt_backoffice_quiz_question_edit', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}">
-                                <i class="bi bi-pencil"></i> {{ 'Edit'|trans }}
-                            </a>
-                        {% endif %}
-                        <ul>
-                            {%~ for answer in question.answers %}
-                                <li{% if answer.isRightAnswer %} class="text-decoration-underline"{% endif %}>
-                                    {{ answer.text }}
-                                    {% if answer.candidates|length > 0 %}
-                                        <small class="text-muted">
-                                            ({{ answer.candidates|map(c => c.name)|join(', ') }})
-                                        </small>
-                                    {% endif %}
-                                </li>
-                            {%~ else %}
-                                {{ 'There are no answers for this question'|trans -}}
-                            {%~ endfor %}
-                        </ul>
+    <div data-controller="bo--question-list bo--modal-form"
+         data-bo--question-list-reorder-url-value="{{ path('tvdt_backoffice_quiz_questions_reorder', {seasonCode: season.seasonCode, quiz: quiz.id}) }}"
+         data-bo--question-list-csrf-value="{{ csrf_token('question_reorder') }}"
+         data-bo--question-list-can-modify-value="{{ is_granted('QUIZ_MODIFY_CONTENT', quiz) ? 'true' : 'false' }}"
+         data-bo--question-list-saved-label-value="{{ 'Order saved'|trans }}"
+         data-bo--question-list-error-label-value="{{ 'Error saving order'|trans }}">
+
+        <h4 class="mb-3 d-flex align-items-center gap-2">
+            {{ 'Questions'|trans }}
+            <span class="badge d-none fw-normal" style="font-size:.7rem;vertical-align:baseline" data-bo--question-list-target="status"></span>
+        </h4>
+
+        <div data-bo--question-list-target="list">
+            {%~ for question in quiz.questions ~%}
+                <div class="card mb-2"
+                     data-bo--question-list-target="item"
+                     data-question-id="{{ question.id }}">
+                    <div class="card-body py-2">
+                        <div class="d-flex align-items-center gap-2">
+                            {% if is_granted('QUIZ_MODIFY_CONTENT', question) %}
+                                <span class="text-muted" style="cursor:grab" data-drag-handle>
+                                    <i class="bi bi-grip-vertical"></i>
+                                </span>
+                            {% endif %}
+                            <div class="flex-grow-1">
+                                {% set questionError = questionErrors[question.id.toString] ?? null %}
+                                <span class="badge rounded-pill me-1{% if questionError %} text-bg-danger{% else %} invisible{% endif %}"
+                                      {% if questionError %}data-bs-toggle="tooltip" title="{{ questionError }}"{% endif %}>!</span>
+                                <strong><span data-question-number>{{ loop.index }}</span>. {{ question.question }}</strong>
+                            </div>
+                            {% if is_granted('QUIZ_MODIFY_CONTENT', question) %}
+                                <button class="btn btn-sm btn-outline-secondary flex-shrink-0"
+                                        data-action="click->bo--modal-form#open"
+                                        data-url="{{ path('tvdt_backoffice_quiz_question_edit', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
+                                        data-modal-title="{{ 'Edit question'|trans }}">
+                                    <i class="bi bi-pencil"></i> {{ 'Edit'|trans }}
+                                </button>
+                            {% elseif quiz.isLocked %}
+                                <button class="btn btn-sm btn-outline-secondary flex-shrink-0"
+                                        data-action="click->bo--modal-form#open"
+                                        data-url="{{ path('tvdt_backoffice_quiz_question_view', {seasonCode: season.seasonCode, quiz: quiz.id, question: question.id}) }}"
+                                        data-modal-title="{{ 'Question details'|trans }}">
+                                    <i class="bi bi-eye"></i> {{ 'View'|trans }}
+                                </button>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
+            {% else %}
+                {{ 'EMPTY'|trans }}
+            {% endfor %}
+        </div>
+
+        <div class="modal fade" tabindex="-1"
+             data-bo--modal-form-target="modal"
+             aria-labelledby="questionEditModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="questionEditModalLabel">{{ 'Edit question'|trans }}</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body" data-bo--modal-form-target="modalBody"></div>
+                    <div class="modal-footer" data-bo--modal-form-target="modalFooter"></div>
+                </div>
             </div>
-        {% else %}
-            {{ 'EMPTY'|trans }}
-        {% endfor %}
+        </div>
     </div>
 
     {{ _self.confirm_modal(

templates/backoffice/season/tab_question_bank.html.twig

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-md-8 col-12">
+    <div class="col-md-8 col-12" data-controller="bo--modal-form">
         <div class="mb-3">
             <a class="btn btn-sm btn-outline-primary" href="{{ path('tvdt_backoffice_question_bank_new', {seasonCode: season.seasonCode}) }}">{{ 'Add question'|trans }}</a>
         </div>
@@ -120,9 +120,10 @@
                             </form>
                         {% endif %}
                         <div class="btn-group btn-group-sm" role="group">
-                            <a class="btn btn-outline-secondary"
-                               href="{{ path('tvdt_backoffice_question_bank_edit', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
-                               title="{{ 'Edit'|trans }}"><i class="bi bi-pencil"></i></a>
+                            <button type="button" class="btn btn-outline-secondary"
+                                    data-action="click->bo--modal-form#open"
+                                    data-url="{{ path('tvdt_backoffice_question_bank_edit', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
+                                    title="{{ 'Edit'|trans }}"><i class="bi bi-pencil"></i></button>
                             <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                                     data-bs-target="#deleteBankQuestion-{{ bankQuestion.id }}"
                                     title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button>
@@ -163,6 +164,20 @@
         {% endfor %}
         </tbody>
     </table>
+        <div class="modal fade" tabindex="-1"
+             data-bo--modal-form-target="modal"
+             aria-labelledby="bankQuestionEditModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="bankQuestionEditModalLabel">{{ 'Edit question'|trans }}</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body" data-bo--modal-form-target="modalBody"></div>
+                    <div class="modal-footer" data-bo--modal-form-target="modalFooter"></div>
+                </div>
+            </div>
+        </div>
     </div>
     <div class="col-md-4 col-12">
         {{ include('backoffice/help/season_question_bank.html.twig') }}