@let btnConfig = buttonConfig();
@if (btnConfig) {
  <button
    nz-button
    [nzType]="btnConfig.type"
    [nzSize]="btnConfig.size"
    [disabled]="btnConfig.disabled"
    [nzDanger]="btnConfig.danger"
    [nzBlock]="btnConfig.display === 'block'"
    [nzLoading]="isSubmitting()"
    nz-tooltip
    [nzTooltipTitle]="btnConfig.tooltipText"
    (click)="createModal()">
    <i
      nz-icon
      [nzType]="btnConfig.icon"></i>
    {{ btnConfig.label }}
  </button>
}

<!-- modal title -->
<ng-template #modalTitle>
  @if (this.mode() === 'approve') {
    Approve This Assertion's Classification
  } @else if (this.mode() === 'revoke') {
    Revoke This Assertion's Classification Approval
  } @else if (this.mode() === 'approveChanges') {
    Approve Changes to This Assertion
  }
</ng-template>

<!-- Approve Assertion modal content-->
<ng-template #approveModalContent>
  <nz-spin [nzSpinning]="isSubmitting()">
    <span>
      You are about to formally
      <strong>
        Approve this Assertion's Classification on behalf of
        {{ mostRecentOrg()?.name }} </strong
      >. Are you sure you wish to proceed?
    </span>
  </nz-spin>
</ng-template>

<!-- Revoke Assertion modal content-->
<ng-template #revokeModalContent>
  <nz-spin [nzSpinning]="isSubmitting()">
    <span>
      You are about to formally
      <strong>
        Revoke {{ mostRecentOrg()?.name }}'s Approval of this Assertion's
        Classification</strong
      >. Are you sure you wish to proceed?
    </span>
    <nz-divider class="approval-divider"></nz-divider>
    <textarea
      placeholder="Enter a reason for revoking this Approval"
      rows="4"
      nz-input
      [(ngModel)]="revocationComment"></textarea>
  </nz-spin>
</ng-template>

<!-- Approve Assertion Changes modal content-->
<ng-template #approveChangesModalContent>
  Before approving this Assertion's changes, ensure that they do not effect the
  original classification by <strong>{{ mostRecentOrg()?.name }}</strong
  >.
</ng-template>

<!-- modal footer -->
<ng-template
  #modalFooter
  let-ref="modalRef">
  <button
    nz-button
    (click)="ref.destroy()"
    nzSize="small">
    Cancel
  </button>
  @if (mode() === 'approve' || mode() === 'approveChanges') {
    @let label = mode() === 'approve' ? 'Approve' : 'Approve Changes';
    <button
      nzType="primary"
      nzSize="small"
      nz-button
      (click)="perform()"
      nz-tooltip
      [nzTooltipTrigger]="mostRecentOrg() ? 'hover' : null"
      [nzTooltipTitle]="'For ' + mostRecentOrg()?.name">
      {{ label }}
    </button>
  }
  @if (mode() === 'revoke') {
    @let comment = revocationComment();
    <button
      [disabled]="comment == undefined || comment.length < 10"
      nzType="primary"
      nzSize="small"
      nz-button
      (click)="perform()"
      nz-tooltip
      [nzTooltipTrigger]="mostRecentOrg() ? 'hover' : null"
      [nzTooltipTitle]="'For ' + mostRecentOrg()?.name">
      Revoke Approval
    </button>
  }
</ng-template>