<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-12 col-md-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 aggregateItems(tx.vin)">
          <div>
            <div class="ellipsis">
              <p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></p>
            </div>
            <div [hidden]="!expanded">
              <p *ngIf="vin.confirmations"><b>Confirmations</b> {{vin.confirmations}}</p>
              <p><b>scriptSig</b></p>
              <div *ngFor="let item of vin.items">
                <div *ngIf="item.scriptSig">
                  <div *ngFor="let scriptSig of item.scriptSig.asm | split:' '">
                    <div class="ellipsis">
                      <p>{{ scriptSig }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div item-end>
            {{ currency.getConversion(vin.value) }}
          </div>
        </ion-item>
      </ion-list>

    </ion-col>

    <ion-col col-12 col-md-1 text-center>
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-col>

    <ion-col col-12 col-md-6>
      <ion-list>
        <ion-item *ngFor="let vout of tx.vout">
          <div>
            <div class="ellipsis">
              <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a></p>
            </div>
            <div [hidden]="!expanded">
              <p><b>Type</b> {{vout.scriptPubKey.type}}</p>
              <p><b>scriptPubKey</b></p>
              <div class="ellipsis">
                <p>{{vout.scriptPubKey.asm}}</p>
              </div>
            </div>
          </div>

          <div item-end>
            {{ currency.getConversion(vout.value) }}
            <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-3>
      <span [hidden]="tx.isCoinBase">Fee {{ currency.getConversion(tx.fees) }}</span>
    </ion-col>
    <ion-col col-6 text-center>
      {{ tx.confirmations }} Confirmations
    </ion-col>
    <ion-col col-3 text-right>
      <span class="">{{ currency.getConversion(tx.valueOut) }}</span>
    </ion-col>
  </ion-row>
</ion-grid>
