<ion-grid>
  <ion-row>
    <ion-col col-8>
      <div class="ellipsis">
        <ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon><ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon> <span><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span>
      </div>
    </ion-col>
    <ion-col col-4 text-right>
      <div [hidden]="!tx.firstSeenTs">
        <span translate>first seen at</span>
        <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
      </div>
      <div [hidden]="!tx.blocktime && tx.firstSeenTs">
        <span translate>mined</span>
        <time>{{tx.time * 1000 | date:'medium'}}</time>
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-5>

      <ion-list [hidden]="!tx.isCoinBase">
        <ion-item>
          No Inputs (Newly Generated Coins)
        </ion-item>
      </ion-list>

      <ion-list [hidden]="tx.isCoinBase">
        <ion-item *ngFor="let vin of tx.vin">
          <div>
            <p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a> <span item-end>{{ vin.value + ' BTC' }}</span></p>
            <div [hidden]="!expanded">
              <p><b>Confirmations</b> {{vin.confirmations}}</p>
              <p><b>scriptSig</b></p>
              <div *ngIf="vin.scriptSig">
                <div *ngFor="let item of vin.scriptSig.asm | split:' '" class="ellipsis">
                  <p>{{item}}</p>
                </div>
              </div>
            </div>
          </div>
        </ion-item>
      </ion-list>

    </ion-col>
    <ion-col col-2 text-center>
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-col>
    <ion-col col-5>
      <ion-list>
        <ion-item *ngFor="let vout of tx.vout">
          <div>
            <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a></p>
            <div [hidden]="!expanded">
              <p><b>Type</b> {{vout.scriptPubKey.type}}</p>
              <p><b>scriptPubKey</b></p>
              <div class="ellipsis">
                <span>{{vout.scriptPubKey.asm}}</span>
              </div>
            </div>
          </div>

          <div item-end>
            {{ vout.value + ' BTC' }}
            <span [hidden]="!vout.spentTxId">(S)</span>
            <span [hidden]="vout.spentTxId">(U)</span>
          </div>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-6>
      <span [hidden]="tx.isCoinBase">Fee {{ tx.fees + ' BTC' }}</span>
    </ion-col>
    <ion-col col-6 text-right>
      {{ tx.confirmations }} Confirmations
      <span class="">{{ tx.valueOut + ' BTC' }}</span>
    </ion-col>
  </ion-row>
</ion-grid>
