<div class="d-flex moderation-expanded">
  <!-- report left part (report details) -->
  <div class="left">

    <!-- report metadata -->
    @if (isAdminView() && abuse().reporterAccount) {
      <div class="d-flex">
        <span class="moderation-expanded-label" i18n>Reporter</span>

        <span class="moderation-expanded-text">
          <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse().reporterAccount.displayName + '&quot;' }"
            class="chip me-1"
          >
            <my-actor-avatar size="18" [actor]="abuse().reporterAccount" actorType="account"></my-actor-avatar>
            <span class="muted">{{ abuse().reporterAccount.nameWithHost }}</span>
          </a>

          <a
            [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse().reporterAccount.displayName + '&quot;' }"
            class="ms-auto muted abuse-details-links"
          >
            <ng-container i18n>{abuse().countReportsForReporter, plural, =1 {1 report} other {{{ abuse().countReportsForReporter }} reports}}</ng-container>
            <my-global-icon iconName="flag"></my-global-icon>
          </a>
        </span>
      </div>
    }

    @if (abuse().flaggedAccount) {
      <div class="d-flex">
        <span class="moderation-expanded-label" i18n>Reportee</span>

        <span class="moderation-expanded-text">
          <a
            [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse().flaggedAccount.displayName + '&quot;' }"
            class="chip me-1"
          >
            <my-actor-avatar size="18" [actor]="abuse().flaggedAccount" actorType="account"></my-actor-avatar>
            <span class="muted">{{ abuse().flaggedAccount ? abuse().flaggedAccount.nameWithHost : '' }}</span>
          </a>

          @if (isAdminView()) {
            <a
              [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse().flaggedAccount.displayName + '&quot;' }"
              class="ms-auto muted abuse-details-links"
            >
              <ng-container i18n>{abuse().countReportsForReportee, plural, =1 {1 report} other {{{ abuse().countReportsForReportee }} reports}}</ng-container>
              <my-global-icon iconName="flag"></my-global-icon>
            </a>
          }
        </span>
      </div>
    }

    @if (abuse().updatedAt) {
      <div class="d-flex">
        <span class="moderation-expanded-label" i18n>Updated</span>
        <time class="moderation-expanded-text abuse-details-date-updated">{{ abuse().updatedAt | ptDate: 'medium' }}</time>
      </div>
    }

    <!-- report text -->
    <div class="mt-3 d-flex">
      <span class="moderation-expanded-label">
        <ng-container i18n>Report</ng-container>
        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse().id  }" class="ms-1 muted">#{{ abuse().id }}</a>
      </span>

      <span class="moderation-expanded-text" [innerHTML]="abuse().reasonHtml"></span>
    </div>

    @if (predefinedReasons) {
      <div class="mt-2 d-flex gap-1">
        @for (reason of predefinedReasons; track reason) {
          <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'tag:' + reason.id  }" class="pt-badge badge-secondary">{{ reason.label }}</a>
        }
      </div>
    }

    @if (abuse().video?.startAt) {
      <div class="mt-2 d-flex">
        <span class="moderation-expanded-label" i18n>Reported part</span>
        <span>
          {{ startAt }}

          @if (abuse().video.endAt) {
            - {{ endAt }}
          }
        </span>
      </div>
    }

    @if (isAdminView() && abuse().moderationComment) {
      <div class="mt-3 d-flex">
        <span class="moderation-expanded-label" i18n>Note</span>
        <span class="moderation-expanded-text d-block" [innerHTML]="abuse().moderationCommentHtml"></span>
      </div>
    }
  </div>

  <!-- report right part (video/comment details) -->
  <div class="right">
    @if (abuse().video) {
      <div>
        @if (abuse().video.deleted) {
          <div i18n>The video was deleted</div>
        } @else {
          <my-embed [video]="abuse().video"></my-embed>
        }
      </div>
    }

    @if (abuse().comment) {
      <div class="comment-html">
        <div>
          <strong i18n>Comment:</strong>
        </div>

        <div [innerHTML]="abuse().commentHTML"></div>
      </div>
    }
  </div>
</div>
