<app-security-lock routerLink="/dashboard"></app-security-lock>


<div *ngIf="networkRatingEnabled$ | async" (click)="levelDropdown.toggle(origin)" cdkOverlayOrigin
  #origin="cdkOverlayOrigin"
  class="flex flex-row items-center gap-0.5 px-2 py-1 -mt-1 rounded-md cursor-pointer text-xxs text-secondary hover:text-primary hover:bg-gray-200">
  {{ activeLevelText }}

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
    <path fill-rule="evenodd"
      d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
      clip-rule="evenodd" />
  </svg>

</div>

<sfng-dropdown externalTrigger="true" #levelDropdown>
  <div sfngTipUpAnchor class="network-rating-level-list" [class.auto-pilot]="mode === 'auto'">
    <div class="rate-header">
      <label style="white-space: nowrap; margin-right: 5px; opacity: 0.9; display: flex; width: 100%;">
        Network Rating
        <sfng-tipup style="margin-left: 0.5rem; align-items: center;display: flex;" key="pilot-widget-NetworkRating">
        </sfng-tipup>
      </label>
      <sfng-select *appExpertiseLevel="'developer'" [ngModel]="mode" (ngModelChange)="updateMode($event)">
        <sfng-select-item *sfngSelectValue="'auto'">
          <span>
            <span class="auto-detect low"></span>
            <span>Auto Detect</span>
          </span>
        </sfng-select-item>
        <sfng-select-item *sfngSelectValue="'manual'">
          <span>
            <span class="off"></span>
            <span>Manual</span>
          </span>
        </sfng-select-item>
      </sfng-select>
    </div>

    <ng-container *ngFor="let opt of options">
      <div sfngTipUpAnchor class="level" [class.selected]="activeLevel === opt.level"
        [class.suggested]="suggestedLevel === opt.level && suggestedLevel > activeLevel"
        (click)="selectLevel(opt.level)">
        <div style="display: flex;align-items: center;">
          <span>
            {{opt.displayText}}
          </span>
          <span class="situation">
            {{opt.subText || ''}}
          </span>
          <sfng-tipup style="margin-left: auto;" [key]="'pilot-widget-NetworkRating-' + opt.displayText"></sfng-tipup>
        </div>
      </div>
    </ng-container>
  </div>
</sfng-dropdown>
