@if (boostedBy) {
  <div class="boost-label muted">🔁 {{ boostedBy }} boosted</div>
}
<article class="status">
  <a class="avatar-link" [routerLink]="['/accounts', display.account.id]">
    <img class="avatar" [src]="display.account.avatar" [alt]="display.account.username" />
  </a>
  <div class="body">
    <div class="meta">
      <a class="name" [routerLink]="['/accounts', display.account.id]">{{
        display.account.display_name || display.account.username
      }}</a>
      <span class="acct muted">&#64;{{ display.account.acct }}</span>
    </div>
    @if (editing()) {
      <div class="editor">
        <textarea rows="3" [ngModel]="editText()" (ngModelChange)="editText.set($event)"></textarea>
        <div class="editor-actions">
          <button class="btn btn-outline" (click)="cancelEdit()">Cancel</button>
          <button class="btn" [disabled]="!editText().trim() || saving()" (click)="saveEdit()">
            {{ saving() ? 'Saving…' : 'Save' }}
          </button>
        </div>
      </div>
    } @else {
      <a class="content-link" [routerLink]="['/statuses', display.id]">
        @if (display.spoiler_text) {
          <div class="spoiler">{{ display.spoiler_text }}</div>
        }
        <div class="content" [innerHTML]="display.content"></div>
      </a>
    }
    @if (quotedStatus(); as q) {
      <a class="quote-card" [routerLink]="['/statuses', q.id]" (click)="$event.stopPropagation()">
        <div class="quote-meta">
          <img class="quote-avatar" [src]="q.account.avatar" [alt]="q.account.username" />
          <span class="quote-name">{{ q.account.display_name || q.account.username }}</span>
          <span class="acct muted">&#64;{{ q.account.acct }}</span>
        </div>
        <div class="quote-content" [innerHTML]="q.content"></div>
      </a>
    } @else if (quoteUnavailable()) {
      <div class="quote-card quote-unavailable muted">Quoted post is unavailable.</div>
    }
    @if (display.media_attachments.length) {
      <div class="media">
        @for (m of display.media_attachments; track m.id) {
          <img [src]="m.preview_url || m.url" [alt]="m.description || ''" />
        }
      </div>
    }
    <div class="actions">
      <button class="action" (click)="$event.stopPropagation()" title="Reply">
        💬 <span>{{ display.replies_count }}</span>
      </button>
      <button class="action" [class.on]="display.reblogged" (click)="toggleReblog($event)" title="Boost">
        🔁 <span>{{ display.reblogs_count }}</span>
      </button>
      <button class="action" [class.on]="display.favourited" (click)="toggleFavourite($event)" title="Favourite">
        ⭐ <span>{{ display.favourites_count }}</span>
      </button>
      <button class="action" [class.on]="display.bookmarked" (click)="toggleBookmark($event)" title="Bookmark">
        🔖
      </button>
      @if (isOwn()) {
        <button class="action" (click)="startEdit($event)" title="Edit">✏️</button>
        <button class="action" (click)="remove($event)" title="Delete">🗑️</button>
      } @else if (reported()) {
        <span class="action reported" title="Reported">🚩 reported</span>
      } @else {
        <button class="action" (click)="openReport($event)" title="Report">🚩</button>
      }
    </div>
  </div>
</article>

@if (showReport()) {
  <app-report-dialog
    [username]="display.account.username"
    [accountId]="display.account.id"
    [statusId]="display.id"
    (closed)="showReport.set(false)"
    (submitted)="onReported()"
  />
}