<div class="commit" *ngIf="changeGroup.show(filter)">
  <div *ngIf="!chooseCommit && !approving">
    <blamelist-panel
        class="commit-panel"
        [commits]="changeGroup.commits"
        [range]="changeGroup.range"
        [comments]="changeGroup.comments"></blamelist-panel>
    <results-panel
        class="commit-panel"
        [changes]="changeGroup.filteredChanges(filter)"
        [range]="changeGroup.range"
        [filter]="filter"></results-panel>
  </div>
  <div *ngIf="chooseCommit">
    <blamelist-picker
        class="commit-panel"
        [commits]="changeGroup.commits"
        [range]="changeGroup.range"
        [comments]="changeGroup.comments"
        (selected)="selectedCommit=$event"></blamelist-picker>
    <results-selector-panel
        class="commit-panel"
        [changes]="changeGroup.filteredChanges(filter)"
        [range]="changeGroup.range"
        [filter]="filter"
        [selected]="selected"></results-selector-panel>
  </div>
  <div *ngIf="approving">
    <blamelist-panel
        class="commit-panel"
        [commits]="changeGroup.commits"
        [range]="changeGroup.range"
        [comments]="changeGroup.comments"></blamelist-panel>
    <results-selector-panel
        class="commit-panel"
        [changes]="changeGroup.filteredChanges(filter)"
        [range]="changeGroup.range"
        [filter]="filter"
        [selected]="selected"
        failuresOnly></results-selector-panel>
  </div>
  <div *ngIf="approving" class="commit-bottom">
    Comment: Use GitHub short links like #456 (dart-lang sdk issue 456),
    flutter/engine#93, or google/quiver-dart#45. You can also paste
    URLs of GitHub issues in dart-lang, flutter, or google directly.
    <br>
    <material-input
        multiline
        label="Comment"
        required
        rows="3"
        [(ngModel)]="commentText"></material-input>
  </div>
  <div class="commit-bottom">
    <material-button
        *ngIf="firestoreService.isLoggedIn && changeGroup.range.length > 1 && !approving"
        raised
        [disabled]="chooseCommit"
        (click)="chooseCommit = true">
      Narrow blamelist...
    </material-button>
    <material-button
        *ngIf="firestoreService.isLoggedIn && changeGroup.range.length > 1 && chooseCommit"
        raised
        (click)="pinCommit()">
      Assign changes to commit
    </material-button>
    <material-button
        *ngIf="approveEnabled && !approving"
        raised
        (click)="approving = true; chooseCommit = false">
      Approve/Comment...
    </material-button>
    <material-button
        *ngIf="approving"
        raised
        (click)="approving = false">
      Cancel
    </material-button>
    <material-button
        *ngIf="approving"
        raised
        (click)="approve(false)">
      Revoke Selected Approvals
    </material-button>
    <material-button
        *ngIf="approving"
        raised
        (click)="approve(null)">
      Comment without Approving
    </material-button>
    <material-button
        *ngIf="approving"
        raised
        (click)="approve(true)">
      Approve
    </material-button>
    <material-button
        *ngIf="approveEnabled && !approving"
        raised
        (click)="openNewGithubIssue()">
      Create GitHub issue...
    </material-button>
  </div>
</div>