<div class="container p-0">
  <div class="row">
    <div class="col-md-3">
      <form class="mb-4" [formGroup]="calculatorForm">
        <!--<mat-form-field appearance="outline">
          <input formControlName="principalInvestmentAmount" matInput />
        </mat-form-field>-->

        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Savings Rate per Month</mat-label>
          <input
            formControlName="paymentPerPeriod"
            matInput
            step="100"
            type="number"
          />
          <span class="ml-2" matTextSuffix>{{ currency }}</span>
        </mat-form-field>

        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Annual Interest Rate</mat-label>
          <input
            formControlName="annualInterestRate"
            matInput
            step="0.25"
            type="number"
          />
          <div class="ml-2" matTextSuffix>%</div>
        </mat-form-field>

        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Retirement Date</mat-label>
          <div>
            {{ calculatorForm.get('retirementDate').value | date: 'MMMM YYYY' }}
          </div>
          <input
            class="d-none"
            formControlName="retirementDate"
            matInput
            [matDatepicker]="datepicker"
          />
          <mat-datepicker-toggle
            matIconSuffix
            [disabled]="hasPermissionToUpdateUserSettings !== true"
            [for]="datepicker"
          />
          <mat-datepicker
            #datepicker
            startView="multi-year"
            [disabled]="hasPermissionToUpdateUserSettings !== true"
            (monthSelected)="setMonthAndYear($event, datepicker)"
          >
          </mat-datepicker>
        </mat-form-field>

        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Projected Total Amount</mat-label>
          <input
            formControlName="projectedTotalAmount"
            matInput
            step="100"
            type="number"
          />
          <span class="ml-2" matTextSuffix>{{ currency }}</span>
        </mat-form-field>
      </form>
    </div>
    <div class="col-md-9 text-center">
      <div class="chart-container mb-4">
        @if (isLoading) {
          <ngx-skeleton-loader
            animation="pulse"
            [theme]="{
              height: '100%',
              width: '100%'
            }"
          />
        }
        <canvas
          #chartCanvas
          class="h-100"
          [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
        ></canvas>
      </div>
    </div>
  </div>
</div>
