Move abuse-list details into its own component
[oweals/peertube.git] / client / src / app / +admin / moderation / video-abuse-list / video-abuse-details.component.html
1 <div class="d-flex moderation-expanded">
2   <!-- report left part (report details) -->
3   <div class="col-8">
4
5     <!-- report metadata -->
6     <div class="d-flex">
7       <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
8       <span class="col-9 moderation-expanded-text">
9         <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
10           <img
11             class="avatar"
12             [src]="videoAbuse.reporterAccount.avatar.path"
13             (error)="switchToDefaultAvatar($event)"
14             alt="Avatar"
15           >
16           <div>
17             <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
18           </div>
19         </a>
20         <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
21           {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
22         </a>
23       </span>
24     </div>
25
26     <div class="d-flex">
27       <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
28       <span class="col-9 moderation-expanded-text">
29         <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="chip">
30           <img
31             class="avatar"
32             [src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
33             (error)="switchToDefaultAvatar($event)"
34             alt="Avatar"
35           >
36           <div>
37             <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
38           </div>
39         </a>
40         <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
41           {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
42         </a>
43       </span>
44     </div>
45
46     <div class="d-flex" *ngIf="videoAbuse.updatedAt">
47       <span class="col-3 moderation-expanded-label" i18n>Updated</span>
48       <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
49     </div>
50
51     <!-- report text -->
52     <div class="mt-3 d-flex">
53       <span class="col-3 moderation-expanded-label">
54         <ng-container i18n>Report</ng-container>
55         <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id  }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
56       </span>
57       <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
58     </div>
59
60     <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
61       <span class="col-3 moderation-expanded-label" i18n>Note</span>
62       <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
63     </div>
64
65   </div>
66
67   <!-- report right part (video details) -->
68   <div class="col-4">
69     <div class="screenratio">
70       <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
71         <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
72         <span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
73       </div>
74       <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
75     </div>
76   </div>
77 </div>