Replace browser confirmations with confirmation dialog

frontend/src/app/components/tenant-card/tenant-card.html

@@ -27,24 +27,60 @@
       <strong>Pièces jointes</strong><span>{{ tenant().attachments?.length ?? 0 }}</span>
     </div>
     @for (attachment of tenant().attachments ?? []; track attachment.id) {
-      <button
-        mat-button
-        type="button"
-        class="attachment-row"
-        [attr.aria-busy]="downloadingAttachmentIds().has(attachment.id)"
-        [disabled]="deleting() || downloadingAttachmentIds().has(attachment.id)"
-        [attr.aria-label]="'Télécharger la pièce jointe ' + attachment.fileName"
-        (click)="attachmentDownloadRequested.emit({ tenantId: tenant().id!, attachment })"
+      <div
+        class="attachment-item"
+        [attr.aria-busy]="
+          deletingAttachmentIds().has(attachment.id) ||
+          downloadingAttachmentIds().has(attachment.id)
+        "
       >
-        @if (downloadingAttachmentIds().has(attachment.id)) {
-          <mat-spinner diameter="16" aria-hidden="true" /> Téléchargement…
-        } @else {
-          <span aria-hidden="true">↧</span>{{ attachment.fileName }}
+        <div class="attachment-actions">
+          <button
+            mat-button
+            type="button"
+            class="attachment-row"
+            [disabled]="
+              deleting() ||
+              deletingAttachmentIds().has(attachment.id) ||
+              downloadingAttachmentIds().has(attachment.id)
+            "
+            [attr.aria-label]="'Télécharger la pièce jointe ' + attachment.fileName"
+            (click)="attachmentDownloadRequested.emit({ tenantId: tenant().id!, attachment })"
+          >
+            @if (downloadingAttachmentIds().has(attachment.id)) {
+              <mat-spinner diameter="16" aria-hidden="true" /> Téléchargement…
+            } @else {
+              <span aria-hidden="true">↧</span>{{ attachment.fileName }}
+            }
+          </button>
+          <button
+            mat-button
+            type="button"
+            class="attachment-delete danger-action"
+            [disabled]="
+              deleting() ||
+              deletingAttachmentIds().has(attachment.id) ||
+              downloadingAttachmentIds().has(attachment.id)
+            "
+            [attr.aria-label]="'Retirer la pièce jointe ' + attachment.fileName"
+            (click)="attachmentDeleteRequested.emit({ tenantId: tenant().id!, attachment })"
+          >
+            @if (deletingAttachmentIds().has(attachment.id)) {
+              <mat-spinner diameter="16" aria-hidden="true" /> Suppression…
+            } @else {
+              <fa-icon [icon]="faXmark" aria-hidden="true" />
+            }
+          </button>
+        </div>
+        @if (attachmentDownloadErrors()[attachment.id]) {
+          <p class="attachment-error" role="alert">
+            {{ attachmentDownloadErrors()[attachment.id] }}
+          </p>
         }
-      </button>
-      @if (attachmentDownloadErrors()[attachment.id]) {
-        <p class="attachment-error" role="alert">{{ attachmentDownloadErrors()[attachment.id] }}</p>
-      }
+        @if (attachmentDeleteErrors()[attachment.id]) {
+          <p class="attachment-error" role="alert">{{ attachmentDeleteErrors()[attachment.id] }}</p>
+        }
+      </div>
     }
     @if (tenant().id) {
       @if (uploadError() || attachmentError()) {