<div class="table">
  <div class="row">
    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.ID' | translate }}</span>
    <span class="cell key-value" [style.flex-basis]="sizes[1] + 'px'" (contextmenu)="variablesService.onContextMenuOnlyCopy($event, transaction.tx_hash)" (click)="openInBrowser(transaction.tx_hash)">{{transaction.tx_hash}}</span>
    <span class="cell label" [style.flex-basis]="sizes[2] + 'px'">{{ 'HISTORY.DETAILS.SIZE' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[3] + 'px'">{{ 'HISTORY.DETAILS.SIZE_VALUE' | translate : {value: transaction.tx_blob_size} }}</span>
  </div>
  <div class="row">
    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.HEIGHT' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[1] + 'px'">{{transaction.height}}</span>
    <span class="cell label" [style.flex-basis]="sizes[2] + 'px'">{{ 'HISTORY.DETAILS.CONFIRMATION' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[3] + 'px'">{{transaction.height === 0 ? 0 : variablesService.height_app - transaction.height}}</span>
  </div>
  <div class="row">
    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.INPUTS' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[1] + 'px'" tooltip="{{inputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-dimensions" [delay]="500" [showWhenNoOverflow]="false">{{inputs.join(', ')}}</span>
    <span class="cell label" [style.flex-basis]="sizes[2] + 'px'">{{ 'HISTORY.DETAILS.OUTPUTS' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[3] + 'px'" tooltip="{{outputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-dimensions" [delay]="500" [showWhenNoOverflow]="false">{{outputs.join(', ')}}</span>
  </div>
  <div class="row">
    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.PAYMENT_ID' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[1] + sizes[2] + sizes[3] + 'px'"
          tooltip="{{transaction.payment_id}}" placement="top" tooltipClass="table-tooltip comment-tooltip" [delay]="500" [showWhenNoOverflow]="false">
      {{transaction.payment_id}}
    </span>
  </div>
  <div class="row">
    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.COMMENT' | translate }}</span>
    <span class="cell value" [style.flex-basis]="sizes[1] + sizes[2] + sizes[3] + 'px'"
          tooltip="{{transaction.comment}}" placement="top" tooltipClass="table-tooltip comment-tooltip" [delay]="500" [showWhenNoOverflow]="false"
          (contextmenu)="variablesService.onContextMenuOnlyCopy($event, transaction.comment)">
      {{transaction.comment}}
    </span>
  </div>
</div>
