<button
    (click)="switchView(viewModes.STANDARD)"
    [attr.help-mode-key]="'views'"
    [class.active]="viewModeService.isStandard()"
    [matTooltipPosition]="'above'"
    [matTooltip]="'file-preview.standard-tooltip' | translate"
    class="red-tab"
>
    {{ 'file-preview.standard' | translate }}
</button>

<div [matTooltipPosition]="'above'" [matTooltip]="'file-preview.delta-tooltip' | translate">
    <button
        (click)="switchView(viewModes.DELTA)"
        *deny="roles.getRss"
        [attr.help-mode-key]="'views'"
        [class.active]="viewModeService.isDelta()"
        [disabled]="!canSwitchToDeltaView()"
        class="red-tab"
    >
        {{ 'file-preview.delta' | translate }}
    </button>
</div>

<div [matTooltipPosition]="'above'" [matTooltip]="'file-preview.redacted-tooltip' | translate">
    <button
        (click)="switchView(viewModes.REDACTED)"
        *deny="roles.getRss"
        [attr.help-mode-key]="'views'"
        [class.active]="viewModeService.isRedacted()"
        [disabled]="!canSwitchToRedactedView()"
        class="red-tab"
    >
        {{ 'file-preview.redacted' | translate }}
    </button>
</div>

<div [matTooltipPosition]="'above'" [matTooltip]="'file-preview.text-highlights-tooltip' | translate">
    <button
        (click)="switchView(viewModes.TEXT_HIGHLIGHTS)"
        *deny="roles.getRss"
        [attr.help-mode-key]="'views'"
        [class.active]="viewModeService.isEarmarks()"
        [disabled]="!canSwitchToEarmarksView()"
        class="red-tab"
    >
        {{ 'file-preview.text-highlights' | translate }}
    </button>
</div>
