refactor: split every modal template in its own file

web/b3desk/templates/meeting/card.html

@@ -4,4 +4,6 @@ <h4 class="fr-card__title">{{ meeting.name }}</h4>
     {% include 'meeting/row.html' %}
   </div>
 </div>
-{% include 'meeting/modals.html' %}
+{% include 'meeting/modals/delete.html' %}
+{% include 'meeting/modals/invite.html' %}
+{% include 'meeting/modals/recordings.html' %}

web/b3desk/templates/meeting/list.html

@@ -18,7 +18,9 @@ <h3 class="fr-text--lg fr-mt-1-5v">{{ meeting.name }}</h3>
       {% include 'meeting/row.html' %}
     </div>
   </div>
-  {% include 'meeting/modals.html' %}
+  {% include 'meeting/modals/delete.html' %}
+  {% include 'meeting/modals/invite.html' %}
+  {% include 'meeting/modals/recordings.html' %}
   {% endfor %}
   {% if meetings|length and config.get("SATISFACTION_POLL_URL") %}
     <iframe id="iframe-poll"

web/b3desk/templates/meeting/modals/delete.html

@@ -0,0 +1,18 @@
+<!-- Supprimer -->
+<div class="modal-template" id="delete-{{ meeting.id }}">
+  <div class="modal-body modal-body--center">
+    <p>Voulez-vous vraiment supprimer {{ the_meeting }} <em>{{ meeting.name }}</em> ?</p>
+    <div class="fr-highlight warning" id="meeting-delete-video-warning">
+      <p>
+        En supprimant {{ this_meeting }} vous supprimerez aussi les enregistrements qui lui sont rattachés.
+      </p>
+    </div>
+
+    <form action="{{ url_for("routes.delete_meeting") }}" method="POST" class="delete">
+      <button type="submit" class="fr-btn fr-btn--primary" >Supprimer</button>
+      <button type="reset" class="fr-btn fr-btn--secondary js-modal-close" >Annuler</button>
+      {% include 'meeting/id.html' %}
+      {% include 'meeting/csrf.html' %}
+    </form>
+  </div>
+</div>

web/b3desk/templates/meeting/modals/invite.html

@@ -0,0 +1,52 @@
+<!-- Inviter -->
+<div class="modal-template" id="share-{{ meeting.id }}">
+    <div class="modal-body">
+        <h2 class="fr-h4">Inviter les modérateurs</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-moderator-url">{{ meeting.moderator_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ meeting.moderator_signin_url }}');" title="Copier le lien modérateur dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="moderator") }}">Rejoindre {{ the_meeting }} en tant que modérateur principal</a>
+        </p>
+
+        <h2 class="fr-h4">Inviter les participants</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-attendee-url">{{ meeting.attendee_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.attendee_signin_url }}');" title="Copier le lien participant dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="attendee") }}">Rejoindre {{ the_meeting }} en tant que participant</a>
+        </p>
+
+        <h2 class="fr-h4">Inviter les participants authentifiés {% if config.OIDC_ATTENDEE_SERVICE_NAME %}via {{ config.OIDC_ATTENDEE_SERVICE_NAME }} {% endif %}</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-authenticated-attendee-url">{{ meeting.authenticated_attendee_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-authenticated-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.authenticated_attendee_signin_url }}');" title="Copier le lien participant authentifié dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_authenticated", meeting_id=meeting.id) }}">Rejoindre {{ the_meeting }} en tant que participant authentifié</a>
+        </p>
+    </div>
+</div>

web/b3desk/templates/meeting/modals/recordings.html

@@ -0,0 +1,54 @@
+<!-- Enregistrements -->
+<div class="modal-template" id="recordings-{{ meeting.id }}">
+  <div class="modal-body modal-body--center">
+    {% if meeting.running %}
+      <p>{% trans the_meeting=the_meeting.capitalize %}{{ the_meeting }} est toujours en cours. Si un enregistrement est en cours, il ne sera encodé qu'après la fin {{ of_the_meeting }}.{% endtrans %}</p>
+    {% endif %}
+    <p>{% trans %}Après la fin d'{{ a_meeting }}, l'encodage de l'enregistrement peut prendre autant de temps que la durée {{ of_the_meeting }}.{% endtrans %}</p>
+    <p>{% trans %}Si aucun modérateur ne met fin {{ to_the_meeting }}, un délai supplémentaire de plusieurs minutes s'ajoute après que tous les utilisateurs l'aient quitté.{% endtrans %}</p>
+    {% for r in meeting.recordings %}
+    <h3>{{ r.name }} - {{ r.participants }}</h3>
+    <div class="fr-table fr-table--bordered fr-table--layout-fixed">
+      <table>
+        <thead>
+          <th>{% trans %}Images{% endtrans %}</th>
+          <th>{% trans %}Lien{% endtrans %}</th>
+        </thead>
+        <tbody>
+        {% for p in r.playbacks %}
+          {% for f in p %}
+          <tr>
+            <td>
+              <div class="fr-grid-row fr-grid-row--gutters">
+              {% for i in f.images %}
+              <div class="fr-col">
+                <img alt="{{ i.alt }}" title="{{ i.alt }}" src="{{ i.url }}"/>
+              </div>
+              {% endfor %}
+              </div>
+            </td>
+            <td style="vertical-align: middle">
+              <div class="fr-grid-row fr-grid-row--gutters">
+                <a class="fr-btn fr-btn--primary" target="_blank" rel="noopener" href="{{ f.url }}"><span class="fr-fi-play-line"></span></a>
+                <a href="#"
+                class="fr-btn fr-btn--primary js-modal js-modal-close"
+                title="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
+                aria-label="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
+                data-modal-content-id="delete-video-{{ r.recordID }}"
+                data-modal-title="{% trans %}Suppression d'enregistrement{% endtrans %}"
+                data-modal-close-text="x"
+                data-modal-close-title="Fermer la fenêtre modale"><span class="fr-fi-delete-line"></span></a>
+                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ f.url }}');" title="{% trans %}Copier le lien de l'enregistrement dans le presse-papiers{% endtrans %}">
+                  <span class="ri-clipboard-line"></span>
+                </button>
+              </div>
+            </td>
+          </tr>
+          {% endfor %}
+        {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% endfor %}
+  </div>
+</div>