<form [formGroup]="filterForm">
  <div class="mb-3">
    <mat-form-field appearance="outline" class="w-100 without-hint">
      <mat-label i18n>Account</mat-label>
      <mat-select formControlName="account">
        <mat-option [value]="null" />
        @for (account of accounts; track account.id) {
          <mat-option [value]="account.id">
            <div class="d-flex">
              @if (account.platform?.url) {
                <gf-entity-logo
                  class="mr-1"
                  [tooltip]="account.platform?.name"
                  [url]="account.platform?.url"
                />
              }
              <span>{{ account.name }}</span>
            </div>
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
  <div class="mb-3">
    <mat-form-field appearance="outline" class="w-100 without-hint">
      <mat-label i18n>Holding</mat-label>
      <mat-select
        formControlName="holding"
        [compareWith]="holdingComparisonFunction"
      >
        <mat-select-trigger>{{
          filterForm.get('holding')?.value?.name
        }}</mat-select-trigger>
        <mat-option [value]="null" />
        @for (holding of holdings; track holding.name) {
          <mat-option [value]="holding">
            <div class="line-height-1 text-truncate">
              <span
                ><b>{{ holding.name }}</b></span
              >
              <br />
              <small class="text-muted"
                >{{ holding.symbol | gfSymbol }} · {{ holding.currency }}</small
              >
            </div>
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
  <div class="mb-3">
    <mat-form-field appearance="outline" class="w-100 without-hint">
      <mat-label i18n>Tag</mat-label>
      <mat-select formControlName="tag">
        <mat-option [value]="null" />
        @for (tag of tags; track tag.id) {
          <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
  <div class="mb-3">
    <mat-form-field appearance="outline" class="w-100 without-hint">
      <mat-label i18n>Asset Class</mat-label>
      <mat-select formControlName="assetClass">
        <mat-option [value]="null" />
        @for (assetClass of assetClasses; track assetClass.id) {
          <mat-option [value]="assetClass.id">{{
            assetClass.label
          }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>
</form>
