src/app/toolspage/toolspage.component.html

<div class="tools-page">
  <div class="filters-content">
    <section class="filters-card">
      <h2 class="title">Market Selection</h2>

      <form class="grid" autocomplete="off">
        <!-- Country -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Country</mat-label>
          <mat-select [(ngModel)]="selectedCountry" name="country" (selectionChange)="onCountryChange()">
            <mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Exchange -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Exchange</mat-label>
          <mat-select [(ngModel)]="selectedExchange" name="exchange"
                      [disabled]="!selectedCountry" (selectionChange)="onExchangeChange()">
            <mat-option *ngFor="let e of getMarket()" [value]="e">{{ e }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Index -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Index</mat-label>
          <mat-select [(ngModel)]="selectedIndexName" name="index"
                      [disabled]="!selectedExchange" (selectionChange)="onIndexChange()">
            <mat-option *ngFor="let d of getMarketDivision()" [value]="d">{{ d }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Companies (multi-select) bound to indexSelected -->
        <mat-form-field appearance="fill" class="full">
          <mat-label>Select Companies (multi-select)</mat-label>
          <mat-select [(ngModel)]="indexSelected"
                      (ngModelChange)="onCompaniesModelChange($event)"
                      name="companies"
                      [disabled]="companies.length === 0"
                      multiple>
            <mat-option (click)="toggleSelectAll()" [disabled]="companies.length === 0">
              {{ isAllSelected() ? 'Unselect All' : 'Select All' }}
            </mat-option>
            <mat-option *ngFor="let c of getCompanies(); trackBy: trackBySymbol" [value]="c.symbol">
              {{ c.company }} ({{ c.symbol }})
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>
    </section>

    <section class="filters-card">
      <h2 class="title">Search</h2>

      <form class="grid" autocomplete="off">
        <!-- Search ticker/company via backend (/searchcompanies) -->
        <mat-form-field appearance="fill" class="full ticker-search">
          <mat-label>Search ticker</mat-label>
          <input matInput
                 type="text"
                 placeholder="Type symbol or company (e.g., INFY, RELIANCE)"
                 [formControl]="tickerCtrl"
                 [matAutocomplete]="tickAuto" />
          <button mat-icon-button matSuffix *ngIf="tickerCtrl.value" (click)="clearTickerSearch()" aria-label="Clear">
            <mat-icon>close</mat-icon>
          </button>
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>

        <mat-autocomplete #tickAuto="matAutocomplete" (optionSelected)="onPickTicker($event.option.value)">
          <mat-option *ngFor="let h of filteredCompanies$ | async; trackBy: trackBySymbol" [value]="h">
            <div style="display:flex;align-items:center;gap:10px;width:100%">
              <strong style="min-width:90px">{{ h.symbol }}</strong>
              <span style="flex:1;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ h.company }}</span>
              <span style="font-size:12px;opacity:.75">{{ h.indexCode }}</span>
            </div>
          </mat-option>
        </mat-autocomplete>

        <!-- Chips: ONLY search-picked items -->
        <mat-chip-listbox *ngIf="selectedChips.length" class="chipbar" aria-label="Picked tickers">
          <mat-chip-row *ngFor="let t of selectedChips; trackBy: trackBySymbol"
                        [removable]="true"
                        (removed)="onRemoveChip(t.symbol)">
            {{ t.symbol }}
            <ng-container *ngIf="t.company && t.company !== t.symbol">
              — {{ t.company }}
            </ng-container>
            <button matChipRemove aria-label="Remove"><mat-icon>close</mat-icon></button>
          </mat-chip-row>
        </mat-chip-listbox>
      </form>
    </section>
  </div>

  <div class="type-content">
    <section class="filters-card">
      <h2 class="title">Trading Type</h2>

      <form class="grid" autocomplete="off">
        <mat-form-field appearance="fill" class="col">
          <mat-label>Trading Type</mat-label>
          <mat-select [(ngModel)]="selectedTradingType" name="tradingType"
                      [disabled]="!selectedCompanies || selectedCompanies.length === 0">
            <mat-option value="intraday" disabled>Intraday</mat-option>
            <mat-option value="swing">Swing trading</mat-option>
            <mat-option value="longTerm" disabled>Position trading (long-term)</mat-option>
            <mat-option value="scalping" disabled>Scalping</mat-option>
            <mat-option value="momentum" disabled>Momentum Trading</mat-option>
            <mat-option value="trendFollowing" disabled>Trend-Following</mat-option>
            <mat-option value="meanReversion" disabled>Mean-Reversion</mat-option>
            <mat-option value="breakout" disabled>Breakout Trading</mat-option>
            <mat-option value="options" disabled>Options Trading</mat-option>
            <mat-option value="futures" disabled>Futures Trading</mat-option>
            <mat-option value="arbitrage" disabled>Arbitrage Trading</mat-option>
            <mat-option value="eventDriven" disabled>Event-Driven Trading</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-raised-button
                type="button"
                class="run-btn"
                (click)="submit()"
                [disabled]="loading || !selectedCompanies || selectedCompanies.length === 0">
          Run Analysis
        </button>
      </form>
    </section>
  </div>
</div>

<!-- Loading overlay -->
<div class="overlay" *ngIf="loading">
  <mat-spinner diameter="100"></mat-spinner>
  <div class="hint">Processing…</div>
</div>