<div class="title">{{ "attributes." + attributeName | translate }}</div>
<div class="subheading" style="margin-top: 0.5rem">
  {{ "savingThrow.subheading" | translate }}
</div>

<div class="content">
  {{ "savingThrow.content" | translate }}
</div>

<value-box [value]="saveModifier" [label]="'general.modifier'"></value-box>

<h4 class="t-2">{{ "skillDetails.title" | translate }}</h4>

<mat-radio-group [(ngModel)]="advantage" (change)="showButtons()">
  <mat-radio-button class="example-radio-button" [value]="'none'">{{
    "skillDetails.none" | translate
  }}</mat-radio-button>
  <mat-radio-button class="example-radio-button" [value]="'advantage'">{{
    "skillDetails.advantage" | translate
  }}</mat-radio-button>
  <mat-radio-button class="example-radio-button" [value]="'disadvantage'">{{
    "skillDetails.disadvantage" | translate
  }}</mat-radio-button>
</mat-radio-group>

@if (showButtonsContainer) {
  <div class="vertical-buttons bottom">
    <ui-button
      [color]="'green'"
      [type]="'apply'"
      [width]="'w20'"
      (click)="close('update')"
    >
    </ui-button>
    <ui-button
      [color]="'red'"
      [type]="'discard'"
      [width]="'w20'"
      (click)="close('cancel')"
    >
    </ui-button>
  </div>
}
