client/src/app/shared/shared-abuse-list/abuse-details.component.html

   1 <div class="d-flex moderation-expanded">
   2   <!-- report left part (report details) -->
   3   <div class="left">
   4
   5     <!-- report metadata -->
   6     <div class="d-flex" *ngIf="isAdminView && abuse.reporterAccount">
   7       <span class="moderation-expanded-label" i18n>Reporter</span>
   8
   9       <span class="moderation-expanded-text">
  10         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
  11           class="chip me-1"
  12         >
  13           <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
  14           <div>
  15             <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
  16           </div>
  17         </a>
  18
  19         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
  20           class="ms-auto muted abuse-details-links" i18n
  21         >
  22           {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
  23           <my-global-icon iconName="flag"></my-global-icon>
  24         </a>
  25       </span>
  26     </div>
  27
  28     <div class="d-flex" *ngIf="abuse.flaggedAccount">
  29       <span class="moderation-expanded-label" i18n>Reportee</span>
  30       <span class="moderation-expanded-text">
  31         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
  32           class="chip me-1"
  33         >
  34           <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
  35           <div>
  36             <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
  37           </div>
  38         </a>
  39
  40         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
  41           class="ms-auto muted abuse-details-links" i18n
  42         >
  43           {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
  44           <my-global-icon iconName="flag"></my-global-icon>
  45         </a>
  46       </span>
  47     </div>
  48
  49     <div class="d-flex" *ngIf="abuse.updatedAt">
  50       <span class="moderation-expanded-label" i18n>Updated</span>
  51       <time class="moderation-expanded-text abuse-details-date-updated">{{ abuse.updatedAt | date: 'medium' }}</time>
  52     </div>
  53
  54     <!-- report text -->
  55     <div class="mt-3 d-flex">
  56       <span class="moderation-expanded-label">
  57         <ng-container i18n>Report</ng-container>
  58         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ms-1 muted">#{{ abuse.id }}</a>
  59       </span>
  60       <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
  61     </div>
  62
  63     <div *ngIf="predefinedReasons" class="mt-2 d-flex">
  64       <span>
  65         <a *ngFor="let reason of predefinedReasons"  [routerLink]="[ '.' ]"
  66           [queryParams]="{ 'search': 'tag:' + reason.id  }" class="pt-badge badge-secondary"
  67         >
  68           <div>{{ reason.label }}</div>
  69         </a>
  70       </span>
  71     </div>
  72
  73     <div *ngIf="abuse.video?.startAt" class="mt-2 d-flex">
  74       <span class="moderation-expanded-label" i18n>Reported part</span>
  75       <span>
  76         {{ startAt }}<ng-container *ngIf="abuse.video.endAt"> - {{ endAt }}</ng-container>
  77       </span>
  78     </div>
  79
  80     <div class="mt-3 d-flex" *ngIf="isAdminView && abuse.moderationComment">
  81       <span class="moderation-expanded-label" i18n>Note</span>
  82       <span class="moderation-expanded-text d-block" [innerHTML]="abuse.moderationCommentHtml"></span>
  83     </div>
  84
  85   </div>
  86
  87   <!-- report right part (video/comment details) -->
  88   <div class="right">
  89     <div *ngIf="abuse.video">
  90       <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
  91       <my-embed *ngIf="!abuse.video.deleted" [video]="abuse.video"></my-embed>
  92     </div>
  93
  94     <div *ngIf="abuse.comment" class="comment-html">
  95       <div>
  96         <strong i18n>Comment:</strong>
  97       </div>
  98
  99       <div [innerHTML]="abuse.commentHtml"></div>
 100     </div>
 101   </div>
 102 </div>