<div class="container-xl">
  <div class="text-center">
    <h2 i18n="shared.calculator">Calculator</h2>
  </div>

  <ng-container *ngIf="(price$ | async) !== undefined; else loading">

    <div class="row calculator-row justify-content-center align-item-center mb-3">
      <div class="input-group calculator-date-group">
        <input
          class="form-control flex-grow-1 disabled"
          style="max-width: 125px"
          placeholder="yyyy-mm-dd"
          name="startDate"
          [(ngModel)]="dateModel"
          ngbDatepicker
          #startDate="ngbDatepicker"
          (dateSelect)="updatePrice()"
          [minDate]="{year: 2010, month: 7, day: 19}"
          [maxDate]="todayDateModel"
          [dayTemplate]="dayTemplate"
        />
        <button class="btn btn-outline-secondary" (click)="startDate.toggle()" type="button"><fa-icon [icon]="['fas', 'calendar']" [style.color]="'var(--fg)'"></fa-icon></button>
      </div>
    </div>

    <div class="row calculator-row justify-content-center">
      <form [formGroup]="form" class="calculator-form">
        <div class="input-group input-group-lg mb-1">
          <span class="input-group-text">{{ currency$ | async }}</span>
          <input type="text" inputmode="decimal" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ms-1'"></app-clipboard>
        </div>

        <div class="input-group input-group-lg mb-1">
          <span class="input-group-text">BTC</span>
          <input type="text" inputmode="decimal" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ms-1'"></app-clipboard>
        </div>

        <div class="input-group input-group-lg mb-1">
          <span class="input-group-text" i18n="shared.sats">sats</span>
          <input type="text" inputmode="numeric" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ms-1'"></app-clipboard>
        </div>
      </form>
    </div>

    <div class="row justify-content-center mt-3" *ngIf="isMaxSupply">
      <div class="alert alert-warning" role="alert" i18n="calculator.max-supply-warning|Max supply warning message">
        Values were capped at the max supply of 21M BTC
      </div>
    </div>

    <br>

    <div class="row calculator-inline-row justify-content-center">
      <div class="bitcoin-satoshis-text">
        ₿
         <span [innerHTML]="form.get('bitcoin').value | bitcoinsatoshis"></span> 
        <span class="sats" i18n="shared.sats">sats</span>
      </div>
    </div>

    <div class="row calculator-inline-row justify-content-center">
      <div class="fiat-text">
        <app-fiat [value]="form.get('satoshis').value" digitsInfo="1.2-2" [blockConversion]="blockConversion"></app-fiat>
      </div>
    </div>

    <div class="row calculator-inline-row justify-content-center mt-3">
      <div class="symbol" *ngIf="{ value: (price$ | async) } as priceData">
        @if (todaySelected) {
          <span>Fiat price last updated <app-time kind="since" [time]="lastFiatPrice$ | async" [fastRender]="true"></app-time>: {{ priceData.value | fiatCurrency : '1.0-0' : (currency$ | async) }}</span>
        } @else if (priceData.value > 0) {
          <span>Fiat daily closing price <app-time kind="since" [time]="timestamp$ | async" [fastRender]="true"></app-time>: {{ priceData.value | fiatCurrency : '1.0-0' : (currency$ | async) }}</span>
        } @else {
          <span>Fiat price not available for the selected date</span>
        }
      </div>
    </div>
  </ng-container>

  <ng-template #loading>
    <div class="text-center">
      Waiting for price feed...
    </div>
  </ng-template>

</div>

<ng-template #dayTemplate let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <span class="btn btn-sm" [class.focused]="focused" [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>
