<form
  class="d-flex flex-column h-100"
  [formGroup]="activityForm"
  (keyup.enter)="activityForm.valid && onSubmit()"
  (ngSubmit)="onSubmit()"
>
  <h1 *ngIf="data.activity.id" mat-dialog-title i18n>Update activity</h1>
  <h1 *ngIf="!data.activity.id" mat-dialog-title i18n>Add activity</h1>
  <div class="flex-grow-1" mat-dialog-content>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Type</mat-label>
        <mat-select formControlName="type">
          <mat-option value="BUY" i18n>BUY</mat-option>
          <mat-option value="DIVIDEND" i18n>DIVIDEND</mat-option>
          <mat-option value="ITEM" i18n>ITEM</mat-option>
          <mat-option value="SELL" i18n>SELL</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': !activityForm.controls['accountId'].hasValidator(Validators.required) }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Account</mat-label>
        <mat-select formControlName="accountId">
          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
            >{{ account.name }}</mat-option
          >
        </mat-select>
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': !activityForm.controls['searchSymbol'].hasValidator(Validators.required) }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Symbol or ISIN</mat-label>
        <input
          autocapitalize="off"
          autocomplete="off"
          autocorrect="off"
          formControlName="searchSymbol"
          matInput
          [matAutocomplete]="autocomplete"
          (blur)="onBlurSymbol()"
        />
        <mat-autocomplete
          #autocomplete="matAutocomplete"
          [displayWith]="displayFn"
          (optionSelected)="onUpdateSymbol($event)"
        >
          <ng-container>
            <mat-option
              *ngFor="let lookupItem of filteredLookupItemsObservable | async"
              class="autocomplete"
              [value]="lookupItem"
            >
              <span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
              ><span><b>{{ lookupItem.name }}</b></span>
            </mat-option>
          </ng-container>
        </mat-autocomplete>
        <mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': !activityForm.controls['name'].hasValidator(Validators.required) }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Name</mat-label>
        <input formControlName="name" matInput />
      </mat-form-field>
    </div>
    <div class="d-none">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Currency</mat-label>
        <mat-select class="no-arrow" formControlName="currency">
          <mat-option *ngFor="let currency of currencies" [value]="currency"
            >{{ currency }}</mat-option
          >
        </mat-select>
      </mat-form-field>
    </div>
    <div class="d-none">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Data Source</mat-label>
        <input formControlName="dataSource" matInput />
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Date</mat-label>
        <input formControlName="date" matInput [matDatepicker]="date" />
        <mat-datepicker-toggle matSuffix [for]="date">
          <ion-icon
            class="text-muted"
            matDatepickerToggleIcon
            name="calendar-clear-outline"
          ></ion-icon>
        </mat-datepicker-toggle>
        <mat-datepicker #date disabled="false"></mat-datepicker>
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Quantity</mat-label>
        <input formControlName="quantity" matInput type="number" />
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Unit Price</mat-label>
        <input formControlName="unitPrice" matInput type="number" />
        <span class="ml-2" matSuffix
          >{{ activityForm.controls['currency'].value }}</span
        >
        <button
          *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
          mat-icon-button
          matSuffix
          title="Apply current market price"
          type="button"
          (click)="applyCurrentMarketPrice()"
        >
          <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
        </button>
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Fee</mat-label>
        <input formControlName="fee" matInput type="number" />
        <span class="ml-2" matSuffix
          >{{ activityForm.controls['currency'].value }}</span
        >
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Asset Class</mat-label>
        <mat-select formControlName="assetClass">
          <mat-option [value]="null"></mat-option>
          <mat-option
            *ngFor="let assetClass of assetClasses"
            [value]="assetClass"
            >{{ assetClass }}</mat-option
          >
        </mat-select>
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Asset Sub-Class</mat-label>
        <mat-select formControlName="assetSubClass">
          <mat-option [value]="null"></mat-option>
          <mat-option
            *ngFor="let assetSubClass of assetSubClasses"
            [value]="assetSubClass"
            >{{ assetSubClass }}</mat-option
          >
        </mat-select>
      </mat-form-field>
    </div>
    <div
      [ngClass]="{ 'd-none': activityForm.controls['tags']?.value?.length <= 0 }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Tags</mat-label>
        <mat-chip-list>
          <mat-chip *ngFor="let tag of activityForm.controls['tags']?.value">
            {{ tag.name }}
          </mat-chip>
        </mat-chip-list>
      </mat-form-field>
    </div>
  </div>
  <div class="d-flex" mat-dialog-actions>
    <gf-value
      class="flex-grow-1"
      [currency]="activityForm.controls['currency']?.value ?? data.user?.settings?.baseCurrency"
      [locale]="data.user?.settings?.locale"
      [value]="total"
    ></gf-value>
    <div>
      <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
      <button
        color="primary"
        i18n
        mat-flat-button
        type="submit"
        [disabled]="!activityForm.valid"
      >
        Save
      </button>
    </div>
  </div>
</form>
